Javascript代码的小小疑问（12）
0
[已解决问题]
解决于 2015-06-11 14:11
一.html代码
<body>
<!-- HTML CODE-->
<div class="tab">
<ul class="tab-menuWrapper" id="tab-menuWrapper">
<li>中国</li>
<li>美国</li>
<li>俄罗斯</li>
<li>小日本</li>
</ul>
<div class="tab-contentWrapper" id="tab-contentWrapper" >
<div >这是中国</div>
<div style="display:none">这是美国</div>
<div style="display:none">这是俄罗斯</div>
<div style="display:none">这是小日本</div>
</div>
</div>
</body>
二.js代码
//获取Dom节点并存入变量
var tabMenus = document.getElementById("tab-menuWrapper").getElementsByTagName("li"),
tabContents = document.getElementById("tab-contentWrapper").getElementsByTagName("div");
//使第一个tab选中样式
tabMenus[0].style.border = "2px solid #a8a8a8";
//遍历数组
for (var i = 0; i < tabMenus.length; i++) {
tabMenus[i]._index = i;
tabMenus[i].onclick = function() {
for (var j = 0; j < tabContents.length; j++) {
tabContents[j].style.display = "none";
}
tabMenus[this._index].style.border = "2px solid #a8a8a8";
tabContents[this._index].style.display = "block";
}
};
三.css代码
@border_gray:#ccc;
@active_gray:#a8a8a8;
.active_class {border: 1px solid @active_gray;background-color: @active_gray;}
.fontSize_large {font-size: 20px;}
.fontSize_normal {font-size: 15px;}
.fontSize_small {font-size: 12px;}
.fontColor_GLOBAL{color:#a8a8a8;}
.fontStyle_GLOBAL {font-family:"Microsoft Yahei";}
.gap_menu {padding: 12px}
.noPadding_margin {padding: 0;margin: 0;}
.tab {width: 500px;}
.tab-menuWrapper {
.noPadding_margin;
cursor: pointer;
.gap_menu;
.fontStyle_GLOBAL;
.fontColor_GLOBAL;
}
.tab-menuWrapper li {
float: left;
list-style: none;
border:1px solid @border_gray;
border-bottom: none;
.gap_menu;
.fontSize_normal;
}
.tab-contentWrapper {
clear: left;
border:1px solid @border_gray;
margin: 0 auto;
text-align: center;
.gap_menu;
.fontSize_large;
.fontStyle_GLOBAL;
.fontColor_GLOBAL;
}
四.js里怎么为menu添加点击后的粗边样式的动态效果？
最佳答案
0
要怎么样的啊？有可能你把js放最后就行了。。。
奖励园豆：5
