tab栏切换demo样式如下:
HTML代码如下
<div class="box">
<div id="hd" class="hd">
<span class="current">新闻</span>
<span>体育</span>
<span>娱乐</span>
<span>媒体</span>
</div>
<div id="bd" class="bd">
<div class="current">这是新闻模块</div>
<div>这是体育模块</div>
<div>这是娱乐模块</div>
<div>这是媒体模块</div>
</div>
</div>
css代码
.box {
width: 230px;
height: 230px;
background-color: #adc;
margin-top: 200px;
left: 50%;
transform: translateX(-50%);
position: relative;
}
.hd span {
display: inline-block;
width: 50px;
height: 30px;
background-color: #cda;
text-align: center;
line-height: 30px;
margin-bottom: 20px;
border-bottom: 2px solid red;
cursor: pointer;
}
.hd .current {
background-color: #adc;
}
.bd div{
display: none;
}
.bd div.current {
display: block;
}
JavaScript代码
var hd = document.getElementById('hd');
var spans = hd.getElementsByTagName('span');
var bd = document.getElementById('bd');
var divs = bd.getElementsByTagName('div');
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
// 为span设置自定义属性,记录当前span的索引
span.setAttribute('index', i)
// 鼠标经过span标签时的函数
span.onmouseover = function() {
// 鼠标经过span时,取消所有span的样式
for(var i = 0; i < spans.length; i++) {
var span = spans[i];
span.className = '';
}
// 为当前span加上高亮显示
this.className = 'current'
// 鼠标经过span时,所有div隐藏
for(var i = 0; i < divs.length; i++) {
var div = divs[i];
div.className = '';
}
// 根据span的索引,显示对应索引div的值
var index = parseInt(this.getAttribute('index'));
// 鼠标经过span时,显示对应的div
divs[index].className = 'current'
}
}
由于自己是前端小白,一些知识点,自己学了以后,发现记不住,但是又比较实用,就写成blog记录一些,写的不好之处还望大神提点~