选项卡tab2

2023-08-14 14:30:52
<!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” 阻止跳转的意思，如图：
码农公寓

相关文章
