功能实现思路：
首先在html中给选项卡菜单元素添加一个自定义属性item，并将item的值作为对应内容块的元素id，相当于将菜单和内容进行关联；
然后用jQuery选中当前菜单，为其设置选中样式，接下来选择其兄弟元素，移除选中样式；
同样，用jQuery选中与当前菜单对应的内容元素，为其移除隐藏样式，然后选中其兄弟元素，添加兄弟元素的隐藏样式。
注意此处有个小坑：内容元素们，需要一个盒子来包装一下，以防选中其兄弟元素时，把其他不相干元素也选中。
代码如下：
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>jQuery选择器实现选项卡功能</title>
<style>
body {
margin: 0;
padding: 0;
}
h3 {
color: #053482;
font-size: 18px;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 50px;
width: 100%;
padding-left: 15px;
}
#box {
width: 600px;
background-color: #EEEEEE;
margin: 30px auto;
position: relative;
}
.displayon {
display: block;
}
#box div {
width: 100%;
background: #ccc;
padding-bottom: 15px;
}
#box div ul.one {
list-style: none;
margin: 0;
padding-top: 15px;
}
#box div ul.one li {
list-style:inside disc;
line-height: 30px;
color: #053482;
}
#box div ul.one li a {
display: table-cell;
height: 30px;
}
#box div ul.one li a:link {
font-size: 14px;
text-decoration-line: none;
color: #053482;
}
#box div ul.one li a:visited {
color: #053482;
}
#box div ul.one li a:hover {
color: #FFFFFF;
background-color: #1466bc;
}
#box div ul.one li a:active {
color: deepskyblue;
background-color: #1466bc;
}
#div2 {
width: 600px;
background: #ccc;
position: absolute;
margin-top: 0;
margin-left: 0;
}
ul.two {
list-style: none;
padding:10px;
}
ul.two li {
margin: 0 auto;
display: inline;
float: left;
padding: 8px;
text-align: center;
}
ul.two img {
border: solid 1px #FFFFFF;
border-radius: 10px;
margin-bottom: 5px;
cursor: pointer;
transition: all 0.6s;
}
ul.two img:hover{
transform: scale(1.4);
}
ul.two li a {
color: #053482;
text-decoration-line: none;
}
ul.two li a:link {
color: #053482;
text-decoration-line: none;
}
ul.two li a:visited {
color: #053482;
text-decoration-line: none;
}
ul.two li a:hover {
color: crimson;
font-weight: bolder;
font-size: 17px;
text-decoration-line: none;
}
ul.two li a:active {
color: darkred;
text-decoration-line: none;
}
#div3 {
width: 600px;
position: absolute;
margin-top: 0;
margin-left: 0;
margin-bottom: 15px;
overflow: hidden;
}
#div3 h3 a:link{
color: #053482;
font-size: 18px;
font-weight: bold;
text-decoration-line: none;
}
#div3 h3 a:visited{
color: #053482;
font-size: 18px;
font-weight: bold;
text-decoration-line: none;
}
#div3 h3 a:hover{
color: darkred;
font-size: 18px;
font-weight: bold;
text-decoration-line: none;
}
#div3 img {
float: left;
margin-left: 20px;
margin-right: 10px;
}
#div3 p {
text-indent: 2em;
line-height: 1.2em;
font-family: "Times New Roman";
color: #053482;
}
#box div ul {
list-style: none;
margin: 0;
padding-top: 15px;
}
#box div ul li {
list-style:inside disc;
line-height: 30px;
color: #053482;
}
#box input {
font-size: 15px;
padding: 7px 15px 7px 15px;
border: 0;
}
.on {
color: #fff;
background: #a1b70d;
font-size: 15px;
padding: 7px 15px 7px 15px;
outline: none;
}
hr {
height:2px;
border:none;
border-top:2px dotted #185598;
margin-top: 50px;
}
.hide {
display: none;
}
</style>
<script>
</script>
</head>
<body>
<div id="box">
<h3>常用资源</h3>
<input item="div1" type="button" value="全文数据库" class="on" onmouseenter="tab(this);" >
<input item="div2" type="button" value="主要期刊" onmouseenter="tab(this);">
<input item="div3" type="button" value="文摘索引" onmouseenter="tab(this);">
<input item="div4" type="button" value="会议论文" onmouseenter="tab(this);">
<input item="div5" type="button" value="学位论文" onmouseenter="tab(this);">
<div>
<div id="div1" class="displayon">
<ul class="one">
<li><span><a href="">IOP</a></span></li>
<li><span><a href="">Elsevier/ScienceDirect</a></span></li>
<li><span><a href="">Springer</a></span></li>
<li><span><a href="">IEL</a></span></li>
<li><span><a href="">AIP Journals</a></span></li>
<li><span><a href="">中国知网</a></span></li>
<li><span><a href="">维普</a></span></li>
<li><span><a href="">万方</a></span></li>
</ul>
</div>
<div id="div2" class="hide">
<ul class="two">
<li><img src="images/shu1_library2017.jpg" height="231" width="172"/><br><a href="">ADS Service</a></li>
<li><img src="images/shu2_library2017.jpg" height="231" width="172"/><br><a href="">Web of Science</a></li>
<li><img src="images/shu3_library2017.jpg" height="231" width="172"/><br><a href="">EI工程索引</a></li>
</ul>
</div>
<div id="div3" class="hide">
<h3><a href="">Research in Astronomy and Astrophysics (RAA)</a></h3>
<img src="images/raa.jpg" width="100"/>
<p>RAA has moved our online peer review system to the ScholarOne (S1) system. Please re-register and submit your new submission to our new system, however current submissions will still stay in the OJS system until their review process is finished. We will also keep the OJS system as our publishing system.</p>
<hr width="100%">
<h3><a href="">Research in Astronomy and Astrophysics (RAA)</a></h3>
<img src="images/raa.jpg" width="100"/>
<p>RAA has moved our online peer review system to the ScholarOne (S1) system. Please re-register and submit your new submission to our new system, however current submissions will still stay in the OJS system until their review process is finished. We will also keep the OJS system as our publishing system.</p>
</div>
<div id="div4" class="hide">
<ul>
<li>Proceedings of IAU</li>
<li>AIP Conference Proceedings</li>
<li>Proceedings of ASP</li>
<li>万方会议论文</li>
</ul>
</div>
<div id="div5" class="hide">
<ul>
<li>PQDT-博硕士论文</li>
<li>"美国博士论文"数据库</li>
<li>ProQuest全球博硕士论文资料库</li>
<li>CASTD中科院学位论文库</li>
<li>中国知网（CNKI）科技类博硕士论文</li>
<li>万方学位论文</li>
</ul>
</div>
</div>
</div>
<script>
function tab(self) {
$(self)
.addClass("on") //为当前选项卡添加选中样式
.siblings() //选中所有兄弟标签
.removeClass("on"); //取消兄弟选项卡的on样式
var box1 = "#" + $(self).attr("item") //获取当前元素的自定义属性值
$(box1)
.removeClass("hide") //移除当前标签的hide属性
.siblings() //选中所有兄弟标签
.addClass("hide") //给兄弟标签添加hide样式
}
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
