首页 新闻 搜索 专区 学院

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添加点击后的粗边样式的动态效果?

Coca-code的主页 Coca-code | 初学一级 | 园豆:6
提问于:2015-06-08 09:42
< >
分享
最佳答案
0

要怎么样的啊?有可能你把js放最后就行了。。。

奖励园豆:5
浅草青晨 | 小虾三级 |园豆:700 | 2015-06-10 09:00
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册