Css & JavaScript & jquery 实现选项卡的制作

Bertha 。 2023-10-06 22:23 1阅读 0赞

#### 阅读目录 ####

*  Css 源码
 *   *  源码解析
 *  JavaScript 源码
 *   *  JavaScript 源码解析
 *  jQuery源码
 *   *  jQuery 源码解析

## Css 源码 ##

![在这里插入图片描述][3c10758b857f49c1a1519c259f169aac.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    <style>
    </style>
    <head>
    <meta charset="UTF-8">
    <title>演示文档</title>
    <style>
    *{
          margin:0;padding: 0;}
    body{
          padding: 50px}
    a{
          text-decoration:none;}
    #list{
          list-style-type: none}
    #list a{
          
        float: left;
        background: orange;
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
    #list a:hover{
          opacity: 0.6}
    .clear{
          clear: both;}
    #content div{
          
        width: 298px;height: 150px;
        border:1px solid green;
    }
    #content{
          
        height: 152px;overflow: hidden;
    }
    </style>
    </style>
    </head>
    <body>
    
    <div id="tab">
        <ul id="list">
            <li><a href="#div1">菜单1</a></li>
            <li><a href="#div2">菜单2</a></li>
            <li><a href="#div3">菜单3</a></li>
        </ul>
    </div>
    
    <div class="clear"></div>
    
    <div id="content">
        <div id="div1">内容111111111111.......</div>
        <div id="div2">内容222222222222.......</div>
        <div id="div3">内容333333333333......</div>
    </div>
    
    </body>
    </html>

### 源码解析 ###

核心原理，a 标签的锚点效果 + 父 div 限宽 + 多的部分隐藏。

1、如何实现 a 标签的锚点效果？

href 属性找到对应的位置就好，和选择器一样，一般是 id。

2、如何实现父 div 限宽 + 多的部分隐藏？

#content{
        
      height: 152px;overflow: hidden;
    }

3、如何实现移上去标签改变透明度？

opacity 属性

#list a:hover{
        opacity: 0.6}

4、`clear:both` 一般写在哪个里面？

一般单独写在一个类里面，用的时候直接调用就好了，简单方法

.clear{
        clear: both;}

## JavaScript 源码 ##

![在这里插入图片描述][a275c71490c549f786f801544a3325e3.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>选项卡2</title>
    <style>
    *{
          margin:0px;padding: 0px }
    body{
          padding: 50px}
    #list{
          
        list-style-type: none;
        height: 30px;
        font-size: 14px
    }
    #list li{
          
        width: 80px;
        margin-right: 5px;
        height: 30px; line-height: 30px;
        text-align: center;
        border: solid green 1px;border-bottom: none;
        border-radius: 5px 5px 0 0;
        float: left;
        cursor: pointer;
    }
    #content div{
          
        width: 400px;
        height: 150px;
        border:1px solid green;
        display: none;
        background: rgba(100,50,20,0.2);
        }
        #content div.show{
          display: block;}
        #list li:hover{
          
                background: rgba(100,50,20,0.4);
        }
    .active{
          background: rgba(100,50,20,0.2);}
    </style>
    </head>
    <body>
    
    <div id="tab">
        <ul id="list">
            <li class="active">第一部分</li>
            <li>第二部分</li>
            <li>第三部分</li>
        </ul>
        <div id="content">
            <div class="show">JS进阶......</div>
            <div>JQ精讲......</div>
            <div>JS+JQ+CSS3特效、技巧、案例专题......</div>
        </div>
    </div>
    
    <script>
    // var list=document.getElementById('list')
    // console.log(list);
    // var content=document.getElementById('content')
    // var oli=list.getElementsByTagName('li')
    // console.log(oli);
    // var li_content=content.getElementsByTagName('div')
    
    var oli=document.getElementById('list').getElementsByTagName('li')
    // console.log(oli)
    var li_content=document.getElementById('content').getElementsByTagName('div')
    
    for(var i=0;i<oli.length;i++){
          
        oli[i].index=i
        // console.log(oli[i].index)
        oli[i].onclick=function(){
          
    
            //首先获取到当前被点击li的索引
            //alert(this.index)
    
            //点击后让相应的div显示到当前
            for(var j=0;j<li_content.length;j++){
          
                oli[j].className="";
                li_content[j].style.display='none'
            }
            li_content[this.index].style.display='block';
            oli[this.index].className="active";
    
        }
    }
    </script>
    </body>
    </html>

### JavaScript 源码解析 ###

通过索引把选项卡头的 `li` 标签和选项卡内容的 `div` 标签联系在一起，通过控制 `div` 标签的`display` 属性可以实现选项卡的选项切换。

1、某些样式设置了，但是出不来效果的原因可能是什么？

优先级会导致某些特效出不来

现在设置的优先级低于之前的

可以通过加父标签的方式来增加优先级

2、如何增加样式的优先级？

可以通过加父标签的方式来增加优先级

3、如何实现一组标签中点某个标签，这个标签的样式改变？

动态给点的标签添加一个自己写好的激活样式

oli[this.index].className="active";

4、如何消除一个元素的所有类？

dom 对象的 className 赋空值

oli[j].className="";

5、如何让一个隐藏的元素显示？

将 dom 对象的 style 的 display 属性设置为 none

li_content[j].style.display='none'

6、如何获取一个 id 为 content 的 div 里面的另外的 div ？

getElement 的链式写法  
（因为 getElement 是 document 的方法，其实也是 dom 对象的方法）

var li_content=document.getElementById('content').getElementsByTagName('div')

## jQuery源码 ##

![在这里插入图片描述][0e9c2a23d46042ce930460bc93c8fcb7.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>选项卡3</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
    *{
          margin: 0px;padding: 0px}
    body{
          padding: 50px}
    ul {
          list-style-type: none;}
    #list{
          
        height: 30px;line-height: 30px;
        margin-bottom: 2px
    }
    #list li{
          
        width: 100px;text-align: center;
        border:1px solid green;
        background: rgba(100,50,20,0.2);
        float:left;
        cursor: pointer;
    }
    #content{
          
        width: 304px;height: 150px;
        border:1px solid green;border-top: none;
    }
    #content div{
          display: none;    }
    #content div.show{
          display: block;}
    #list li.active{
          
        background: #fff;
        border-bottom: none;
    }
    </style>
    </head>
    <body>
    
    <div id="tab">
        <ul id="list">
            <li class="active">第一部分</li>
            <li>第二部分</li>
            <li>第三部分</li>
        </ul>
        <div id="content">
            <div class="show">JS进阶......</div>
            <div>JQ精讲......</div>
            <div>JS+JQ+CSS3特效、技巧、案例专题......</div>
        </div>
    </div>
    
    <script>
    $(function(){
          
        var $li=$('#list li')
        $li.click(function(){
          
            $(this).addClass('active').siblings().removeClass('active');
            $('#content div').eq($li.index(this)).show().siblings().hide()
        })
    })
    </script>
    
    </body>
    </html>

### jQuery 源码解析 ###

`ul>li` 做选项卡的选项卡头，多个 `div` 做选项卡的内容，点到对应的 `li`，就切换到对应的 `div`，用 `index()` 获取 `li` 索引，与 `div` 联系。

1、如何获取一个元素所在父亲中同类孩子的索引？

index() 方法

$('#content div').eq($li.index(this)).show().siblings().hide()

2、如何选择除自己之外的所有同级？

没必要用 not() 方法，用 siblings() 就足够了，简单好用。

$(this).addClass('active').siblings().removeClass('active');

3、除 `clear:both` 之外还有什么好方法可以清楚浮动？

设置 `margin-bottom`，因为这样就能保证不在同一行（在多行），`float` 的效果自然影响不到。

#list{
        
      height: 30px;line-height: 30px;
      margin-bottom: 2px
    }

[3c10758b857f49c1a1519c259f169aac.gif_pic_center]: https://img-blog.csdnimg.cn/3c10758b857f49c1a1519c259f169aac.gif#pic_center
[a275c71490c549f786f801544a3325e3.gif_pic_center]: https://img-blog.csdnimg.cn/a275c71490c549f786f801544a3325e3.gif#pic_center
[0e9c2a23d46042ce930460bc93c8fcb7.gif_pic_center]: https://img-blog.csdnimg.cn/0e9c2a23d46042ce930460bc93c8fcb7.gif#pic_center