运行效果：
说明：
使用JQuery 选择器批量绑定菜单的mouseenter事件，实现鼠标移动时更换选项卡。
示例代码：
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<!--<link rel="stylesheet" href="H-ui.css">-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.tab_outer{
margin: 0px auto;
width: 60%;
}
.menu{
background-color: #bbb;
border: 1px solid #bbb;
line-height: 40px;
}
.menu li{
display: inline-block;
color: white;
}
.menu li:hover {
cursor: pointer;
}
.menu a{
padding: 11px;
}
.content{
border: 1px solid #ccc;
height: 300px;
font-size: 30px;
}
.hide{
display: none;
}
.current{
background-color: #0099dd;
color: black;
}
img{
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li index="c1" class="current">MySQL#</li>
<li index="c2" >PHP</li>
<li index="c3" >Ajax</li>
</ul>
<div class="content">
<div id="c1" style="float: left">
<img src="mysql2.jpg">
</div>
<div id="c2" class="hide">
<img src="php3.jpg">
</div>
<div id="c3" class="hide">
<img src="ajax.jpg">
</div>
</div>
</div>
<script>
$(function () {
//选择menu类div里的li
// $('.content div').css('background','yellow');
$('.menu li').on('mouseenter', function () {
tab(this);
});
});
//设置当前选项卡，隐藏其它选项卡
function tab(self) {
$(self)
.addClass("current") //将当前选项卡高亮
.siblings() //将其它非当前选项卡的高亮样式取消,先选择当前的兄弟节点
.removeClass("current"); //再取消高亮样式
var box = "#" + $(self).attr("index"); //获取当前的自定义索引属性,获取当前点击的是哪一个
$(box)
.removeClass("hide") //去掉它的隐藏样式,将对应的内容盒子显示出来
.siblings() //再将其它兄弟盒子内容隐藏,首先先获取其它兄弟节点
.addClass("hide"); //给这些兄弟节点添加隐藏样式
}
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
