选项卡tab2 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin: 0; padding: 0}
        li{list-style: none}
        a{text-decoration: none; color: #333}
        .box{ width: 600px; height: 210px; margin: 50px auto 0; overflow: hidden; }
        .tab_item{float: left; width: 390px; height: 210px; border-right: 1px solid #ddd; background-color: #ddd; }
        .tab_item .tab_content{ height: 210px; text-align: center; line-height: 210px; font-size: 35px; }

        .tab_ui{ float: right; width: 200px; }
        .tab_ui li{ width: 200px; text-align: center; background-color: #C84E69; }
        .tab_ui li a{ display: block; height: 50px; line-height: 50px; margin-bottom: 3px;  color: #fff; font-size: 20px;}
        .tab_ui li.current a{ background-color: #49A945; color: #fff;}
    </style>
</head>
<body>
<div class="box">
    <div class="tab_item" id="tab_item">
        <div class="tab_content">春天的内容</div>
        <div class="tab_content" style="display: none;">夏天的内容</div>
        <div class="tab_content" style="display: none;">秋天的内容</div>
        <div class="tab_content" style="display: none;">冬天的内容</div>
    </div>
    <ul class="tab_ui" id="tab_ui">
        <li class="current"><a href="javascript:;">春</a></li>
        <li><a href="javascript:;">夏</a></li>
        <li><a href="javascript:;">秋</a></li>
        <li><a href="javascript:;">冬</a></li>
    </ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
        //选项卡
        $(function(){
            //点击li事件
            $("#tab_ui li").click(function(){
                //添加当前状态current，它的同辈元素(siblings)移除当前状态current
                $(this).addClass('current').siblings('li').removeClass('current');
                var z = $(this).index();//索引
                //遍历找到对应的内容显示，同辈元素隐藏
                $("#tab_item .tab_content").eq(z).show().siblings('#tab_item .tab_content').hide();
            });
        })
    </script>
    
</body>
</html>

效果图：

 

注意：

若a标签中的href加“#”符号，如图

则，脚本应该多加一句，“return false” 阻止跳转的意思，如图：

 

posted @ 2017-04-27 22:37  前端HL  阅读(179)  评论(0)  编辑  收藏  举报