阅读目录
- 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 }
