首页 前端知识 Css & JavaScript & jquery 实现选项卡的制作

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

2024-04-03 12:04:18 前端知识 前端哥 581 983 我要收藏

阅读目录

  • Css 源码
    • 源码解析
  • JavaScript 源码
    • JavaScript 源码解析
  • jQuery源码
    • jQuery 源码解析

Css 源码

在这里插入图片描述

<!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。

<li><a href="#div1">菜单1</a></li>
<li><a href="#div2">菜单2</a></li>
<li><a href="#div3">菜单3</a></li>

<div id="div1">内容111111111111.......</div>
<div id="div2">内容222222222222.......</div>
<div id="div3">内容333333333333......</div>

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

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

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

opacity 属性

#list a:hover{opacity: 0.6}

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

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

.clear{clear: both;}

JavaScript 源码

在这里插入图片描述

<!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源码

在这里插入图片描述

<!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
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4447.html
标签
评论
发布的文章

java解析超大json文件数据

2024-04-19 21:04:10

头歌-JavaScript基础

2024-04-19 21:04:54

C#Json序列化及反序列化

2024-04-19 21:04:40

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!