分别使用 jQuer与 JS 写出tab选项卡

开发工具与关键技术：Adobe Dreamweaver CC 2017    jQuery与JS的使用
作者：孙水兵
撰写时间：2019年1月18

jQuery是一个JavaScript函数库，是目前主流的 JS 框架。 JQuery官方的主旨是：write less, do more（以更少的代码，实现更多的功能）（ jquery文件下载网址： https://www.jb51.net/zt/jquerydown.htm ）。下面我分别用jQuery和JS写了个案例（由潘老师案例改写）
HTML
对于选项卡的的HTML部分，大致可以两部分，头部和显示内容部分。而这俩部分又可以用一个大盒子装起来，头部给要显示的部分一个类： select，内容部分除了要显示的部分外都设置display：none；
代码部分

<div class="notice" id="notice">
   <div class="notice-tit" id="notice-tit">
   	<ul>
   	<li><a href="#">标题1</a></li>
   	<li><a href="#">标题2</a></li>
   	<li><a href="#">标题3</a></li>
   	<li class="select"><a href="#">标题4</a></li>
   </ul>
   </div>
   <div class="notice-con" id="notice-con">
   	<div class="tab" style="display: none;">
   		<a href="#">内容1</a>
   	</div>
   	<div class="tab" style="display: none;">
   		<a href="#">内容2</a>
   	</div>
   	<div class="tab" style="display: none;">
   		<a href="#">内容3</a>
   	</div>
   	<div class="tab" style="display:block;">
   		<a href="#">内容4</a>
   	</div>
   </div>
</div>

CSS
对于CSS部分，先给选项卡设定一个固定的宽度和高度，设置边框，，再给ul 标签一个固定的宽度，用绝对定位将其固定，再用浮动使ul 下的li 标签并列，然后去除a 标签的样式，并给其·一个伪类，接下来就为select 写一个样式
代码部分

*{
   	margin: 0px;
   	padding: 0px;
   	font-size: 12px;
   	list-style: none;
   }
   
   .notice{
   	width:237px;
   	height:98px;
   	margin:10px;
   	border:1px solid #eee;
   	overflow:hidden;
   }
   .notice-tit{
   	position:relative;
   	height:27px;
   	background-color:#f7f7f7;
   }
   .notice-tit ul{
   	position:absolute;
   	width:301px;
   	left:-1px;
   }
   .notice-tit li{
   	float:left;
   	width:58px;
   	height:26px;
   	line-height:26px;
   	text-align:center;
   	overflow:hidden;
   	padding:1px;
   	border-bottom:1px solid #eee;
   }
   .notice  a{
   	text-decoration:none;
   	color:#000;
   }
   
   .notice  a:hover{
   	color:#c00;
   }
   .notice-tit ul .select{
   	width:58px;
   	height:26px;
   	background:#fff;
   	border-bottom:#fff;
   	border-left:1px solid #eee;
   	border-right:1px solid #eee;
   	padding:0;
   	font-weight:bolder;
   }
   .tab{
   	margin:15px 10px 10px 19px;
   }
   .tab ul li{
   	width:134px;
   	float:left;
   	height:25px;
   	overflow:hidden;
   }
   

jQuery
先遍历循环头部notice-tit下的 ul 下的li 标签，找到select 这个类，然后再初始默认显示一个，其他隐藏，再给点击事件选中高亮，其他菜单取消高亮，选中菜单，出现对应的内容
jQuery代码来源于：https://blog.csdn.net/wm1029218932/article/details/48541875
代码部分（对原代码稍作修改）

 $(function(){
       $("#notice-tit ul li").each(function(index){//遍历
       if($(this).hasClass("select")){
           $("#tab>li").eq(index).show().siblings().hide();

       };//初始默认显示一个，其他隐藏
       $(this).click(function(){
           $(this).addClass("select").siblings().removeClass("select");//选中高亮，其他菜单取消高亮
           $("#notice-con>div").eq(index).show().siblings().hide();//选中菜单，出现对应的内容
       });
       }) ; 
   });
  

JS部分
先声明变量title 和con 再判断title与con的长度是否相等，如果不等，返回，然后再通过for循环对title 附加鼠标移入事件，判断title中是否有select这个类，如果有，取消，并将内容con的样式改为：display: none; 然后再给鼠标移上去的元素添加类select，内容con的样式改为：display: block。
代码部分

window.onload = function(){
   var title = document.getElementById("notice-tit").getElementsByTagName("li");
   var con = document.getElementById("notice-con").getElementsByClassName("tab");
   if(title.length !== con.length){
   	return;
   }
   for(var i=0;i<title.length;i++){
   	title[i].id = i;
   	title[i].onmouseover = function(){
   		for(var j=0;j<title.length;j++){
   		
   	if(title[j].className==="select"){
   				title[j].className = "";	con[j].style.display="none";
   		     }
   			}
   		this.className="select";
   		con[this.id].style.display="block";
   	};
   }
   	
};

就个人在写tab选项卡时遇到的问题与解决方法
1.
原因：jQuery引入错误，应放在最前

正确引入

2. jQuery写完标题切换内容却不切换
解决方法：给所有内容部分加上一个父元素，和标题部分一样。