前端js基础效果--选项卡

最新推荐文章于 2023-07-01 18:20:34 发布

招来红月

最新推荐文章于 2023-07-01 18:20:34 发布

阅读量1k

点赞数 2

分类专栏：前端js基础效果文章标签： js选项卡 jq选项卡选项卡

本文链接：https://blog.csdn.net/divpoxiao/article/details/80384983

版权

前端js基础效果专栏收录该内容

7 篇文章 0 订阅

订阅专栏

js选项卡的实现方法：

先写好一个html css的页面样式

html css部分

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>选项卡</title>
	</head>
<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			list-style: none;
		}
		
		.box {
			width: 50%;
			margin: 0 auto;
		}
		
		.nav {
			width: 100%;
		}
		
		.nav li {
			width: 25%;
			float: left;
			text-align: center;
			border: 1px solid #000;
			box-sizing: border-box;
			border-right: none;
			line-height: 2;
			cursor: pointer;
		}
		
		.nav li:last-child {
			border-right: 1px solid #000;
		}
		
		.nav li.checked {
			border-bottom: 1px solid #ddd;
			background: #ddd;
		}
		
		.subnav {
			border: 1px solid #000;
			border-top: none;
			background: #ddd;
		}
		
		.subnav li {
			width: 100%;
			text-align: center;
			height: 100px;
			line-height: 100px;
			display: none;
		}
		
		.subnav li:first-child {
			display: block;
		}
		
		.clearfix:after {
			content: " ";
			display: block;
			clear: both;
		}
	</style>

	<body>
		<div class="box">
			<ul class="nav clearfix">
				<li class="checked">选项一</li>
				<li>选项二</li>
				<li>选项三</li>
				<li>选项四</li>
			</ul>
			<ul class="subnav">
				<li>我是选项一</li>
				<li>我是选项二</li>
				<li>我是选项三</li>
				<li>我是选项四</li>
			</ul>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</html>

下面用js和jq分别写出来

//js的方法
window.onload=function(){
//找对象的方法很多 我这里用的是比较原始的 可以根据个人爱好自行选
var navUl=document.getElementsByClassName("nav")[0];//这是单独找一个 所以需要加上下标下同
var subnavUl=document.getElementsByClassName("subnav")[0];
var navLi=navUl.getElementsByTagName("li");  //这里要找到navUl里面所有的li所以不加下标下同
var subnavLi=subnavUl.getElementsByTagName("li");
for(var i=0;i<navLi.length;i++){//循环navUl里面的li
	navLi[i].index=i;//navLi[i].index是指navUl里面的li的下标（index）;为该li添加一个index属性，并将index的值设置为i
	navLi[i].onclick=function(){//点击事件 点击navUl里面的li
		for(var j=0;j<navLi.length;j++){//循环去掉navUl里面的li的所有样式，把点击所对应subnav里面的li显示出来
			navLi[j].removeAttribute("class");//清除navUl里面的所有li样式
			subnavLi[j].style.display="none";//隐藏subnavLi里面li
		}
		this.setAttribute("class","checked");//给所navUl里面点击的li样式
		subnavLi[this.index].style.display="block"//让subnavLi里面所对应的li显示
	}
}


//jq的方法  jq包 上面已经引入好了 当然也可以自行引入
//因为jq的选择器很好 很强大 所以非常简单
$(function(){
   $(".nav li").click(function(){//直接点击事件
   $(this).addClass("checked").siblings().removeClass("checked");//给当前点击的li一个样式 移除当前li的所有同胞元元素的样式
   $(".subnav li").eq($(this).index()).show().siblings().hide();//让subnav里面当前点击元素下标所对应的li显示  隐藏subnav里面当前点击元素下标以外的li
  })
})

当然写选项卡的方法有很多我只写了两个最简单的最常用的