jQuery小结7 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <style type="text/css">
        *{margin:0px;padding:0px;}
        body{font-size:12px;}
        
        .box{margin:10px;padding:10px;}
        .box h3{margin:10px 0px;border-bottom:1px solid red;padding-bottom:10px;}
        .box p{line-height:20px;}
        
        .tabbox{margin:10px;}
        .tabbox .tabhead{float:left;list-style:none;margin-right:-1px;}
        .tabbox .tabhead li{width:80px;height:30px;cursor:pointer;line-height:30px;padding:0px 5px;border:1px solid #aaccff;margin-bottom:-1px;border-right:0px;}
        .tabbox .tabhead li.selected{background-color:#aaccff;color:White;font-weight:bold;}
        .tabbox .tabcontent{float:left;border:1px solid #aaccff;padding:10px;min-height:200px;width:600px;background-color:#aaccff;}
        .tabbox .tabcontent div{display:none;line-height:20px;}
        .tabbox .tabcontent div.selected{display:block;}
        
    </style>
    <script type="text/javascript">
         $(function () {
            $(".tabhead li").click(function () {
                $(".tabhead li").removeClass("selected");
                $(this).addClass("selected");
                var index = $(".tabhead li").index($(this));
                $(".tabcontent>div").removeClass("selected");
                $(".tabcontent>div").eq(index).addClass("selected");

            });

        });
    </script>
</head>
<body>
    <div class="box">
        <h3>试题要求</h3>
        <p>
            1.完成选项卡切换功能，其中html和css已经给出，只需写出相应的js代码即可
        </p>
    </div>

    <div class="tabbox">
        <ul class="tabhead">
            <li class="selected">选项卡一</li>
            <li>选项卡二</li>
            <li>选项卡三</li>
            <li>选项卡四</li>
        </ul>
        <div class="tabcontent">
            <div class="selected">内容一</div>
            <div>内容二</div>
            <div>内容三</div>
            <div>内容四</div>
        </div>
    </div>
</body>
</html>

 

posted on 2015-12-13 22:39  guanzhenqiang  阅读(129)  评论(0)    收藏  举报

导航