Tab选项卡点击滑动效果js实现

最新推荐文章于 2024-07-29 18:19:14 发布

Colin_me

最新推荐文章于 2024-07-29 18:19:14 发布

阅读量7k

点赞数 6

分类专栏： JavaScript 前端开发文章标签： html javascript

本文链接：https://blog.csdn.net/arvin_top/article/details/70262857

版权

前端开发同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

JavaScript

16 篇文章 0 订阅

订阅专栏

html部分代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="notice" class="notice">
	<div class="notice-tit" id="notice-tit">
		<ul>
			<li><a href="#">公告</a></li>
			<li><a href="#">规则</a></li>
			<li><a href="#">论坛</a></li>
			<li><a href="#">安全</a></li>
			<li class="select"><a href="#">公益</a></li>
		</ul>
	</div>
	<div id="notice-con" class="notice-con">
		<div class="mod" style="display: none;">
			<ul>
				<li><a href="#">张勇：玩快乐足球</a></li>
				<li><a href="#">张勇：玩快乐足球</a></li>
				<li><a href="#">张勇：玩快乐足球</a></li>
				<li><a href="#">张勇：玩快乐足球</a></li>
			</ul>
		</div>
		<div class="mod" style="display: none;">
			<ul>
				<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
				<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
				<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
				<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
			</ul>
		</div>
		<div class="mod" style="display: none;">
			<ul>
				<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
				<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
				<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
				<li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
			</ul>
		</div>
		<div class="mod" style="display: none;">
			<ul>
				<li><a href="#">张勇：要玩快乐</a></li>
				<li><a href="#">张勇：要玩快乐足球</a></li>
				<li><a href="#">张勇：要玩快乐足球</a></li>
				<li><a href="#">张勇：要玩快乐足球</a></li>
			</ul>
		</div>
		<div class="mod" style="display: block;">
			<ul>
				<li><a href="#">张勇：要玩快乐</a></li>
				<li><a href="#">张勇：要玩快乐足球</a></li>
				<li><a href="#">张勇：要玩快乐足球</a></li>
				<li><a href="#">张勇：要玩快乐</a></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>

css部分代码：

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

js部分代码：

function $(id){
	return typeof id==='string'?document.getElementById(id):id;
}
window.onload = function()
{
	//获取鼠标滑过或点击的标签和要切换内容的元素
	var titles = $('notice-tit').getElementsByTagName('li');
	var divs  =$('notice-con').getElementsByTagName('div');
	// alert(divs.length);
	if(titles.length!=divs.length)
		return;

	//遍历titles下的所有li
	for(var i=0;i<titles.length;i++)
	{
		titles[i].id = i;
		titles[i].onmouseover = function(){
			for(var j=0;j<titles.length;j++)
			{
				//清除所有li上的class
				titles[j].className='';
				divs[j].style.display = 'none';
			}
			//设置当前为高亮显示
			this.className = 'select';
			divs[this.id].style.display = 'block';

		}

	
	}
}

效果演示：