鼠标虚滑过选项卡切换效果代码实例

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了鼠标滑过,选项卡切换效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
}
.tab {
width: 298px;
height: 98px;
margin: 10px;
border: 1px solid #eee;
overflow: hidden;
}
.tab-title {
height: 27px;
position: relative;
background: #f7f7f7;
}
.tab-title ul {
position: absolute;
width: 301px;
left: -1px;
}
.tab-title li {
float: left;
width: 58px;
height: 26px;
line-height: 26px;
text-align: center;
padding: 0 1px;
border-bottom: 1px solid #eee;
overflow: hidden;
}
.tab li a:link, .tab li a:visited {
text-decoration: none;
color: #000;
}
.tab li a:hover {
color: #f90;
font-weight: 700;
}
.tab-title li.select {
background: #fff;
border-bottom-color: #fff;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
padding: 0;
}
.tab .tab-content .tabct {
margin: 10px 10px 10px 19px;
}
.tab .tab-content .tabct ul li {
float: left;
width: 134px;
height: 25px;
overflow: hidden;
}
</style>
<script>
function $(id) {
return typeof id == "string" ? document.getElementById(id) : id;
}
window.onload = function() {
var titleName = $("tab-title").getElementsByTagName("li");
var tabContent = $("tab-content").getElementsByTagName("div");
if (titleName.length != tabContent.length) {
return;
}
for (var index = 0; index < titleName.length; index++) {
titleName[index].id = index;
titleName[index].onmouseover = function () {
for (var j = 0; j < titleName.length; j++) {
titleName[j].className = "";
tabContent[j].style.display = "none"
}
this.className = "select";
tabContent[this.id].style.display = "block";
}
}
}
</script>
</head>
<body>
<div class="tab" id="tab">
<div class="tab-title" id="tab-title">
<ul>
<li class="select"><a href="#">css教程</a></li>
<li><a href="#">div教程</a></li>
<li><a href="#">js教程</a></li>
<li><a href="#">css3教程</a></li>
<li><a href="#">json教程</a></li>
</ul>
</div>
<div class="tab-content" id="tab-content">
<div class="tabct" style="display:block">
<ul>
<li><a href="#">地址是pipipi.net</a></li>
<li><a href="#">地址是pipipi.net</a></li>
<li><a href="#">地址是pipipi.net</a></li>
<li><a href="#">地址是pipipi.net</a></li>
</ul>
</div>
<div class="tabct" 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="tabct" 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="tabct" 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="tabct" 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>
</div>
</body>
</html>

鼠标虚滑过选项卡切换效果代码实例,这样的场景在实际项目中还是用的比较多的,关于鼠标虚滑过选项卡切换效果代码实例就介绍到这了。

鼠标虚滑过选项卡切换效果代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容