jquery 基础+Tab栏切换案例

Bertha 。 2023-07-08 05:48 9阅读 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去写的这个案例,希望你们喜欢.

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现tab栏切换

![在这里插入图片描述][20200304175315638.PNG] html+css <style> .tab2 { wid

拼搏现实的明天。/ 2023年07月11日 06:24/ 0 赞/ 14 阅读

相关 tab栏的简单切换

tab栏的简单切换样式不是很好看，主要的是思路和逻辑上代码： <!DOCTYPE html> <html lang="en"> <

绝地灬酷狼/ 2023年07月08日 09:22/ 0 赞/ 25 阅读

相关 jquery 基础+Tab栏切换案例

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

Bertha 。/ 2023年07月08日 05:48/ 0 赞/ 10 阅读

相关 jQuery样式操作（Tab栏切换）

一、操作方法主要有两种方法：一种是操作css方法，另外一种是设置类样式。操作css方法 1. 参数只写属性名，则返回属性值 2. 参数是属性名，属性值，逗号隔

心已赠人/ 2023年07月03日 13:28/ 0 赞/ 7 阅读

相关 jQuery修改CSS样式、jQuery修改CSS样式类，简单案例-tab栏切换

jQuery修改css样式参数只写属性名，则是返回属性值 $(this).css("color"); 参数是属性名，属性值，中间用逗号分隔，则表示设置一组样

秒速五厘米/ 2023年01月02日 11:28/ 0 赞/ 238 阅读

相关 tab栏切换

tab栏切换 1、jquery方式首先引入 jquery.js 文件 <style type="text/css"> {

分手后的思念是犯贱/ 2022年12月28日 11:08/ 0 赞/ 193 阅读

相关 tab栏切换练习

![在这里插入图片描述][20200806104510340.gif] <!DOCTYPE html> <html lang="en"> <head> <meta c

绝地灬酷狼/ 2022年11月24日 12:56/ 0 赞/ 166 阅读

相关 jQuery特效Tab切换栏选项卡demo

在建站过程中，有时候需要有效利用页面空间，需要将多个模块的链接、图片、视频等网站资源放在一个div中，实现点击或者滑动实现展示多个模块，多用在侧边栏展示网站最新更新、最热文章，

约定不等于承诺〃/ 2022年11月10日 14:19/ 0 赞/ 245 阅读

相关 jQuery实战_tab栏切换

jQuery实现tab栏切换 HTML结构： <ul> <li class="active">第一栏</li> <li>第二

朱雀/ 2022年05月22日 12:40/ 0 赞/ 308 阅读

相关 jquery+css实现Tab栏切换的代码实例

前几天面试碰到现场给写一个Tab栏切换的功能，思想基本上懂，但是好久没写过，一时要全部实现效果还真有点难。回来后，再把思路理一理，写一个，基础还是很重要的。最终要实现的效果

谁践踏了优雅/ 2022年01月29日 00:31/ 0 赞/ 257 阅读