jquery 基础+Tab栏切换案例

最新推荐文章于 2023-07-28 14:46:41 发布

呆呆怪兽

最新推荐文章于 2023-07-28 14:46:41 发布

阅读量609

点赞数 1

分类专栏： jQuery基础 jQuery案例

本文链接：https://blog.csdn.net/weixin_45658984/article/details/104491703

版权

jQuery案例同时被 2 个专栏收录

8 篇文章 1 订阅

订阅专栏

jQuery基础

7 篇文章 0 订阅

订阅专栏

类操作

在原生JS里面className会覆盖元素原来有的类名
jquery里面的类操作就不会这样,只对指定类进行操作,不影响原先的类名

添加类名

addClass()

删除类名

removeClass()

注意:使用这个方法,括号里面不需要再加那个小点,直接写类名就行了
比如说


<div class = "one"></div>
<script>
	$('.one').addClass('two')
</script>

这样我就填加了一个two的类名,不会对one造成影响

Tab栏切换案例jquery代码
这里可以看到,利用了jQuery,很方便的就可以写出想要的效果

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .tab{
        border: 1px solid gray;
        height: 300px;
        width: 755px;
        margin: 100px auto;
    }
    .box-1{
        border-bottom:1px solid gray;
        height: 50px;
        background-color: whitesmoke;
        text-align: center;
    }
    li{ 
        list-style-type: none;
        line-height: 50px;
        float: left;
        display: block;
        width: 150px;
        border-right: 1px solid gray;
   }
   .li-frist{
       background-color: goldenrod;
   }
   .bg{
       background-color: goldenrod;
   }
    .item{
        display: none;
    }
</style>
<body>
    <div class= "tab">
        <div class="box-1">
            <ul>
                <li class="li-frist">产品参数</li>
                <li>产品规格</li>
                <li>功能模块</li>
                <li>售后处理</li>
                <li>好评率</li>
            </ul>
        </div>
        <div class= "box-2">
            <!-- 设置默认显示出来这个 -->
            <div  class="item" style="display: block;">产品参数内容</div>
            <div  class="item">参评规格内容</div>
            <div  class="item">功能模块内容</div>
            <div  class="item">售后处理内容</div>
            <div  class="item">好评率内容</div>

        </div>
 <script>
            $(function() {
                $('li').click(function() {
                    //点击当前的li,当前的li添加一个bg类,其余兄弟移除bg类, 第一个li有li-frist类,也要移除
                    $(this).addClass('bg').siblings('li').removeClass('li-frist bg')
                        //拿到当前li的索引号
                    var index = $(this).index();
                    //然下面的索引号对应li的索引号,点击li显示当前的索引号的div
                    $('.box-2 .item').eq(index).show().siblings('.item').hide()

                })
            })
        </script>

效果是和用原生JS写的一摸一样的,在我的博客里也有用原生js去写的这个案例,希望你们喜欢.

呆呆怪兽

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
jquery 基础+Tab栏切换案例

类操作在原生JS里面className会覆盖元素原来有的类名jquery里面的类操作就不会这样,只对指定类进行操作,不影响原先的类名添加类名addClass()删除类名removeClass()注意:使用这个方法,括号里面不需要再加那个小点,直接写类名就行了比如说<div class = "one"></div><script> $...
复制链接

扫一扫

专栏目录