专栏首页前端说吧JS-制作网页特效——选项卡效果(水平,点击)

JS-制作网页特效——选项卡效果(水平,点击)

//总结:这个样式的思维很重要,以前刚开始做,想的都是,怎么获取到自己点击的是哪一个li,然后给他以对应的div样式。后来发现难点是,怎么找到另外两个没有被点击的li和他们对应的div。把他们的样式去掉。现在恍然,这种“打扫完屋子再请客”的思维,先把所有的都去掉,再想给谁添加就给谁添加就可以了呀!看来以后,想拿起什么东西前,得先学会把该放下的放下。不然,难为的只有自己。

<!DOCTYPE html>
<html>
	<head>
		<meta name="author" content"郭菊锋,702004176@qq.com">
		<meta charset="UTF-8">
		<title>选项卡</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
 
			a {
				text-decoration: none;
				color: black;
			}
 
			li {
				list-style: none;
			}
 
			.tapWrap {
				border: 3px dotted #4169E1;
				width: 25%;
				margin: 10px auto;
				padding: 10px;
				-webkit-border-radius: 8px;
				-moz-border-radius: 8px;
				border-radius: 8px;
			}
 
			ul.tapHeadWrap li {
				width: 75px;
				height: 45px;
				line-height: 45px;
				text-align: center;
				display: inline-block;
				border: 2px solid #ccc;
				background-color: white;
			}
 
			.tapWrap div {
				width: 94%;
				padding: 10px;
				margin-top: -4px;
				border: 2px solid #ccc;
			}
			.tapWrap>ul li:hover,
			.tapWrap div {
				border-top: 3px solid #DC143C;
			}
			.tapWrap div li{
				margin: 5px 0;
			}
			.tapWrap div a:hover{
				text-decoration: underline;
				color: #DC143C;
			}
			.tapWrap>ul li:hover,
			.tapWrap div a:hover {
				cursor: pointer;
			}
			ul.tapHeadWrap li.on {
				border-top: 3px solid #DC143C;
				border-bottom: 7px solid #fff;
			}
			.hide{
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="tapWrap" id="tapWrap">
			<ul id="tapHeadWrap" class="tapHeadWrap">
				<li class="on">房产</li>
				<li>家居</li>
				<li>二手房</li>
			</ul>
			<div>
				<ul>
					<li>
						<a href="javascript:;">275万购昌平邻铁三居 总价20万买一居</a>
					</li>
					<li>
						<a href="javascript:;">200万内购五环三居 140万安家东三环</a>
					</li>
					<li>
						<a href="javascript:;">北京首现零首付楼盘 53万购东5环50平</a>
					</li>
					<li>
						<a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a>
					</li>
				</ul>
			</div>
			<div class="hide">
				<ul>
					<li>
						<a href="javascript:;">40平出租屋大改造 美少女的混搭小窝</a>
					</li>
					<li>
						<a href="javascript:;">经典清新简欧哀家 90平老房焕发新生</a>
					</li>
					<li>
						<a href="javascript:;">新中式的酷色温情 66平撞色活泼家居</a>
					</li>
					<li>
						<a href="javascript:;">瓷砖就像选好老婆 卫生间烟道的设计</a>
					</li>
				</ul>
			</div>
			<div class="hide"> 
				<ul>
					<li>
						<a href="javascript:;">通州豪华3居260万 二环稀缺2居250w甩</a>
					</li>
					<li>
						<a href="javascript:;">西3环通透2居290万 130万2居限量抢购</a>
					</li>
					<li>
						<a href="javascript:;">皇城根小学学区仅260万 121平70万抛!</a>
					</li>
					<li>
						<a href="javascript:;">独家别墅280万 苏州桥2居优惠价248万</a>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
	window.onload = function(){
		var tapDivWrap = document.getElementById('tapWrap');
		var tapDiv = tapDivWrap.getElementsByTagName('div');
//		alert(tapDiv.length)
		var tapUl = document.getElementById('tapHeadWrap');
		var tapLi = tapUl.getElementsByTagName('li');//此例中:利用tagName的方式获取下边的标签更方便
//		alert(tapLi.length)
		for(var i=0;i<tapLi.length;i++){
			tapLi[i].index = i;//对三个li进行重新的编号,现在li[0,1,2]分别对应是0,1,2了,。具体原理明白就是说不出来,反正就是死记硬背知道这种方式,是用来对一个获取到的数组进行重新从零开始编号就对了,以方便下边获取他的下标索引对齐进行对应的操作
			tapLi[i].onclick = function(){
				for(var j = 0;j<tapLi.length;j++){//超出tapLi的长度就是超出了taoLi[i]中的值,会有未定义的错误出现
					tapLi[j].className = "";//这里的tapLi[j]==tapLi[i]的值吗?不等于,这里的作用是让j【也就是从0-2,因为j小于li的长度,j又是从0开始的,所以j就是在0,1,2这三个数上面循环一遍】
//alert(tapLi[j].index);//由此调试循环得出,j分别是0,1,2.对应到html中,就是第一个li、第二个li、第三个li的className都成了0.这样先全部清除掉,到了下边j循环外,this.className处,再把点击的对应的li加上className。
					tapDiv[j].className = "hide";//让所有的都先隐藏
 tapDiv[j].style.display = 'none';//对应的这里也就不能再用className了,而要改成style,上一行的className就要删掉
				}
//j循环的外边
				this.className = "on";//this代指tapLi[i],当前所点击的li,给他添加类名
				tapDiv[this.index].className = "";//this.index=tapLi[i].index,具体作用下边alert做调试得知,就是得到一个对应你点击的li的下标(即一个数字),这个数字再搭配tapDiv[]的方式,自然就是获取和当前li对应的div了,因为div的下标也是从0开始共三个数的。这样,给当前被点击li对应的div空类名,去除掉j循环中添加在他身上的hide枷锁,他就得意重见天日了!
//这里最后把className忘记了,害得我调试了半天。记得思维不能忘,就是通过className来更改他的css样式,或者也可以对应上面j循环里,添加隐藏样式那地方(绿色位置)直接更改css样式:如下
                tapDiv[this.index].style.display = 'block';
				//alert(this.index);//调试:得到的是当前被点击的li的下标

			    }
		  }
	}	
	</script>
<!--清爽js代码如下-->
 1 <script type="text/javascript">
 2         window.onload = function() {
 3             var tapDivWrap = document.getElementById('tapWrap');
 4             var tapDiv = tapDivWrap.getElementsByTagName('div');
 5             var tapUl = document.getElementById('tapHeadWrap');
 6             var tapLi = tapUl.getElementsByTagName('li');
 7             for(var i = 0; i < tapLi.length; i++) {
 8                 tapLi[i].index = i;
 9                 tapLi[i].onclick = function() {
10                     for(var j = 0; j < tapLi.length; j++) {
11                         tapLi[j].className = "";
12                         tapDiv[j].className = "tapHideDiv";
13                     }
14                     this.className = "tapActiveLi";
15                     tapDiv[this.index].className = "";
16                 }
17             }
18         }
19     </script>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js - 移动端的超出滚动功能,附带滚动条,可解决弹层中滚动穿透问题。

    1、解决滚动穿透:通过给弹层绑定touchmove和mousewheel事件,取消默认行为实现。

    xing.org1^
  • css布局 - 九宫格布局的方法汇总(更新中...)

    其实换一种角度和思路,又是一个解决方法,不用margin负值,我们想要li要对其ul两端效果,之所以纠结是因为li又需要margin-right,而右边最后一个...

    xing.org1^
  • es6-开篇

    相应的,后边推出的ES7、8、9、10等都依次是上一版本发出后一年的新迭代版本。不过很多仍是提案,并不被浏览器支持。

    xing.org1^
  • jQuery基础--选择器

    jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。

    eadela
  • 如何将文章列表用<li>分两列显示

      我们平时用ul或ol标签来罗列文章列表时默认是一列,为了美观起见,想把它们两列显示要如何操作呢?怎么用css定义它们?   其实相对比较简单,用几行css样...

    ytkah
  • 移动端弹性滑动以及vue记录滑动位置

    https://segmentfault.com/a/1190000012857661

    前端博客 : alili.tech
  • 获取元素

    例如:我们想要操作页面上的某部分(显示/隐藏,动画),需要先获取到该部分对应的元素,再对其进行操作。

    星辰_大海
  • 3.列表-HTML基础

    到现在为止,我们学习了很多标签,但是由于不熟悉标签的语义化,有时我们可能会用别的标签代替另一个标签,从而实现相同的效果,但这是一种错误的思想。

    见贤思齊
  • Cypress学习12-父子元素定位

    若要在元素中获取所有下一个同级DOM元素,直到另一个元素,请使用.next until()命令。

    上海-悠悠
  • Pug迭代

    听着music睡

扫码关注云+社区

领取腾讯云代金券