标签切换实现

最新推荐文章于 2021-07-06 07:57:19 发布

hnyysly

最新推荐文章于 2021-07-06 07:57:19 发布

阅读量701

点赞数

分类专栏：前端开发文章标签：标签切换 jquery index eq

本文链接：https://blog.csdn.net/hnyysly/article/details/39669993

版权

前端开发专栏收录该内容

44 篇文章 0 订阅

订阅专栏

html代码

标题用ul li实现，选项没有被选中，也没有被mouseover时，显示基本样式，用class=”nav“设置。选项选中时的样式用class="selected"设置，第一个选项默认添加了selected样式。mouseover时样式由class="cur"设置。

内容切换的基本样式由class="content_hide"设置，默认的内容添加一个class="content_show"让内容display：block覆盖掉class="content_hide"设置的display：none。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<div >
	<ul>
		<li class="nav selected"><a href="javascript:void(0)">选项一</a></li>
		<li class="nav"><a href="javascript:void(0)">选项二</a></li>
		<li class="nav"><a href="javascript:void(0)">选项三</a></li>
		<li class="nav"><a href="javascript:void(0)">选项四</a></li>
	</ul>
</div>
<div>
	<div class="content_hide content_show"><area />aaa</div>
	<div class="content_hide "><area />bbb</div>
	<div class="content_hide "><area />ccc</div>
	<div class="content_hide "><area />ddd</div>
</div>
</body>
</html>

css 代码

<style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	.nav{
		width:100px;
		height:30px;
		float:left;
		text-align:center;
		line-height:30px;
		cursor:pointer;
		list-style:none;
	}
	.selected{
		background-color:#FF0000;
		color:#FFFFFF;
	}
	.cur{
		background-color:#999999;
		color:#FF99FF;
	}
	.content_hide{
	<span style="white-space:pre">	</span>clear:both;
		width:500px;
		height:300px;
		border:1px solid #000000;
		padding:20px;
		display:none;
	}
	.content_show{
		display:block;
	}
</style>

js代码

关键：使用eq(),index()。eq()选择器选取带有指定 index 值的元素。$(selector).index():获取selector相对于同胞元素的位置，$(selector).index(element):获取元素element相对于选择器selector的位置。

1.实现onmouseover功能，给class="nav"绑定mouseover事件，对绑定者添加class="cur"的样式，$(this).addClass("cur");

2.实现onmouseout功能，给class="nav"绑定mouseout事件，对添加了class="cur"的元素删掉这个class样式，$(".cur").removeClass("cur");

3.实现内容切换功能。给class="nav"绑定click事件，先对有class="content_show"的元素删掉这个class样式，对选项卡对应的内容添加class="content_show"样式：

$(".content_show").removeClass("content_show");
$(".content_hide").eq($(".nav").index($(this))).addClass("content_show");或者：$(".content_hide").eq($(this).index()).addClass("content_show");

然后把选项设置选中的样式：

$(".selected").removeClass("selected");
$(this).addClass("selected");