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

发布时间：2023-09-06 01:09责任编辑：熊小新关键词：js

html部分代码：

[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‘; ???????} ???}}

效果演示：

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

原文地址：http://www.cnblogs.com/guangzhou11/p/7481761.html

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

知识推荐

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