jQuery选项卡

最新推荐文章于 2025-06-19 12:40:23 发布

葫芦的

最新推荐文章于 2025-06-19 12:40:23 发布

阅读量299

点赞数

CC 4.0 BY-SA版权

文章标签： jQuery选项卡

本文链接：https://blog.youkuaiyun.com/lxb1113220682/article/details/84594445

本文详细介绍了如何使用HTML5、CSS和JavaScript实现页面Tab切换效果，包括页面结构设计、样式设置及交互逻辑实现。通过jQuery简化了JS操作DOM的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、页面结构h5

<div class="tab">
        <div class="tab-menu">
            <ul>
                <li class="change">tab1</li>
                <li>tab2</li>
                <li>tab3</li>
            </ul>
        </div>
        <div class="tab-box">
            <div>111111111</div>
            <div>222222222</div>
            <div>333333333</div>
        </div>
    </div>

2、CSS设置

.tab{width:300px;height:400px;border:1px solid #E8B554; margin: 0 auto;}
.tab-menu ul{list-style:none;}
.tab-menu li{display:block;width:30%;float:left;border:1px solid #E8B554;}
.tab-box div{display:none; margin-left: 38px;}
/* 让第一个框显示出来 */
.tab-box div:first-Child{display:block;} 
.change{background:#E8B554; color: #fff;}

3.JS设置注：在本地时别忘记jQuery.js

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script>
    $().ready(function(){
        $(".tab-menu li").click(function(){
            var _index = $(this).index();   
            //通过 .index()方法获取元素下标，从0开始，赋值给某个变量
            $(".tab-box>div").eq(_index).show().siblings().hide();   
            //让内容框的第 _index 个显示出来，其他的被隐藏
        $(this).addClass("change").siblings().removeClass("change");    
       //改变选中时候的选项框的样式，移除其他几个选项的样式
    });
});
</script>

效果：

点击之后效果：