JavaScript实现选项卡效果的分析及步骤

 更新时间:2019年04月16日 09:38:58   作者:牛肉烧酒  
这篇文章主要给大家介绍了关于JavaScript实现选项卡效果的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧


慕课网上JavaScript进阶课最后一个编程挑战,自己也是边做边搜,希望通过最后这个自己的总结加深对节点获取方法的了解。

下面话不多说了,来一起看看详细的介绍吧

效果分析之HTML结构

整个结构由上至下分为两部分,标题块使用列表的方式来做,内容快使用盒子模型。其中,内容块中的内容为了实现换行效果,采用了<br>,其实这里每一行用<p>也是可以的(不知道怎么用css实现的我)。

<div id="tab">
	<ul class="tit">
		<li>房产</li>
		<li>家居</li>	
		<li>二手房</li>
	</ul>
	<div> 
	275万购昌平邻铁三居 总价20万买一居<br>
 200万内购五环三居 140万安家东三环<br>
 北京首现零首付楼盘 53万购东5环50平<br>
 京楼盘直降5000 中信府 公园楼王现房<br>
	</div>
 <div>
 40平出租屋大改造 美少女的混搭小窝<br>
 经典清新简欧爱家 90平老房焕发新生<br>
 新中式的酷色温情 66平撞色活泼家居<br>
 瓷砖就像选好老婆 卫生间烟道的设计<br>
 	</div>
 <div> 
 通州豪华3居260万 二环稀缺2居250w甩<br>
 西3环通透2居290万 130万2居限量抢购<br>
 黄城根小学学区仅260万 121平70万抛!<br>
 独家别墅280万 苏州桥2居优惠价248万<br>
 	</div>
</div>	

效果是这样滴,

效果实现之CSS

这里的效果,比较难想到的就是边框的变化了,做的时候想到两个办法:

列表底部设置边框border-bottom,然后每个li设置背景白色,底部边框为无,从而起到 遮挡列表ul底部边框的作用。


每个内容盒子设置顶部边框border-top,然后每个li设置背景白色,底部边框为无,当点击标题块的时候,用li的背景色去遮挡内容盒子对应部分的边框。


下面是采取第一种方法的css:

*{
 margin: 0;
 padding: 0;
 }
#tab{	
 	width:290px;
 /*padding:5px;*/
 height:150px;
 margin:20px;
 }
 #tab ul{
 	list-style:none;
 /*display: block;*/
 height:30px;
 line-height:30px;
 border-bottom:2px saddlebrown solid;
 }
 #tab ul li{
 	display: inline-block;
 	cursor: pointer;
 	list-style: none;
 	height: 28px;
 	width: 60px;
 	line-height: 28px
 	margin:0 5px;
 	text-align: center;
 	border: 2px solid #aaa;
 	border-bottom: none;
 }`

效果基本实现了,接下来做内容块!

按照之前的思路,每个盒子设置边框,但是上边框为无。

#tab div{
 	font-size: 14px;
 height:120px;
 line-height: 25px;
 border:2px solid saddlebrown;
 border-top: none;
 padding:5px;
 }

内容块实现的效果!

到这里,样式设置基本完成,但是根据效果要求,“房产”标题块是默认被点击的状态,所以我在改标题的li上添加一个类名为on,为了更好的配后之后的js添加点击事件,我同时设置on类的样式:

 #tab ul li.on{
  	height: 30px;
  	border:2px solid saddlebrown;
  	border-bottom: none;
  	background:#fff;
  }

除此之外,我们希望点击哪个标题就出现相关标题的内容块,其他内容块隐藏,默认状态下第二个和第三个内容块是隐藏的,所以在这两个盒子上添加类名hide,同时设置hide类的样式:

.hide { display:none; }

交互效果之JavaScript

首先是标题块点击效果—>给每个li添加鼠标点击事件:当某个li被点击,当前li的类名为on,其他li的类名为空。

var lis = document.getElementsByTagName("li");
//console.log(divs)
for(let i=0; i<lis.length; i++){
 lis[i].onclick = function() {
 	for( let n=0; n<lis.length; n++){
 			lis[n].className = "";
 	}
 			this.className = "on";
 }
}	

接下来是内容块的设置,如何设置当点击标题时只显示对应的内容块呢?他们有什么共同之处可以使得内容和标题绑在一起呢?假设给他们排序的化,标题一对应内容一,标题二对应内容二,所以这里使用了index,

index() 方法返回指定元素相对于其他指定元素的 index 位置。

这个位置我们也是可以设置的。在给每个li添加事件的时候用到了for里面的参数i在这里表示0,1,2可以表示标题块之间的相对位置(lis[i].index = i),这也正是盒子块之间的相对位置。我们可以通过divs[this.index]来获取被点击标题对应的盒子。

var divs = document.getElementById("tab").getElementsByTagName("div");
//console.log(divs)
 for(let i=0; i<lis.length; i++){
  lis[i].index = i;
  lis[i].onclick = function() {
 		for( let n=0; n<lis.length; n++){
 				lis[n].className = "";
 				divs[n].className = "hide";
 		}
 			this.className = "on";
 			divs[this.index].className = "";
 	}
 }	

到这里,题目要求的所有效果都实现了,回头看看,感觉不是很难,但是当时在刚看到题目的时候还是很懵的,不知道如何获取被点击的标题(想到了冒泡和捕获,后面还需要对这个进行学习),不知道如何设置css....,自己还需要更多的学习。

——————————分割线—————

很多大佬都指导我说之前的方法耗内存:用for循环给每个li都添加一个点击事件。下面,我用事件委托来更新一下这个办法:

window.onload = function() {
  var uls = document.getElementById('tit');
  var lis = uls.getElementsByTagName('li');
  var divs = document.getElementById('tab').getElementsByTagName('div');
  // console.log(lis)
  console.log(divs)
  uls.onclick = function(ec) {
  for(let i=0; i<lis.length; i++){
   lis[i].className = ""; //遍历每个li设置类名
   divs[i].className = "hide"; 
  }
  var ev = ev || window.event;
  var target = ev.target || ev.srcElement;
  if(target.nodeName.toLowerCase() == 'li'){
   target.className = "on";
   //自己在每个li中定义了一个属性 data-index
   divs[target.getAttribute("data-index")].className = ""; 
   console.log(target);
  }
  } 
 }

我在html中给每个li自定了属性data-index:

<li class="on" data-index="0">房产</li>
<li data-index="1">家居</li>	
<li data-index="2">二手房</li>

再在js中用getAttribute获取所点击的li的属性值

divs[target.getAttribute("data-index")].className = "";

源码链接

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

相关文章

最新评论