search

lcgyh / myDocs

0 stars 0 forks source link

jq-选项卡切换 #40

Open lcgyh opened 6 years ago

lcgyh commented 5 years ago 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
    <link rel="stylesheet" href="styles/lianxi.css">
     <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
    <script src="scripts/lianxi.js"></script>
    <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
    <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->

    <style type='text/css'>
        #j_tab{margin-top: 30px;margin-left: 30px;}
        .hd li{width: 100px;height: 20px;border-radius: 10px;background: red;text-align: center;line-height: 2  0px;}
    </style>
    <script>
        $(function(){

            function table(){
           var tab=$('#j_tab');
           tab.children('.hd').on('mouseover','li',function(){
           var o=$(this);
           var op=o.parents('.hd');
           var os=o.siblings("li");
           var index=o.index();
           os.removeClass('on');
           o.addClass('on');
           var iteams=op.siblings(".bd").children(".item");
           iteams.hide();
           iteams.eq(index).show();
   })
    }
    table();

})
    </script>
</head>
<body>
    <div id="j_tab">
        <ul class="hd clearfix">
            <li class="on fl">标题1</li>
            <li class="fl">标题2</li>
            <li class="fl">标题3</li>
        </ul> 
        <div class="bd">
            <div class="item">第一块内容</div>
            <div class="item hide">第二块内容</div>
            <div class="item hide">第三块内容</div>
        </div>
    </div>

</body>
</html>