tab切换(onmouseover/onclick)

标签：block   use   ntb   mouse   tom   color   bottom   cli   rip   

<style>

</style>

<div id="tab_bar">
　　<ul>

　　　　<li id="tab1" style="background-color: white; color:red;" onmouseover="myclick(1)">实时资讯</li>
　　　　<li id="tab2" onmouseover="myclick(2)">外汇资讯</li>
　　　　<li id="tab3" onmouseover="myclick(3)">专家策略</li>
　　</ul>
</div>

<div class="tab_css" id="tab1_content"></div>

<div class="tab_css" id="tab2_content"></div>

<div class="tab_css" id="tab3_content"></div>

<script>

var myclick = function(v) {

var div=document.getElementById(‘tab_bar‘);
var llis=div.children[0].children;
for(var i = 0; i < llis.length; i++) {
var lli = llis[i];
if(lli == document.getElementById("tab" + v)) {
lli.style.backgroundColor = "white";
lli.style.color = "red";
// lli.style.borderbottom = "none";
} else {
lli.style.backgroundColor = "#efefef";
lli.style.color = "#353535";
}
}

var divs = document.getElementsByClassName("tab_css");
for(var i = 0; i < divs.length; i++) {

var divv = divs[i];

if(divv == document.getElementById("tab" + v + "_content")) {
divv.style.display = "block";
} else {
divv.style.display = "none";
}
}

};

</script>

tab切换(onmouseover/onclick)

标签：block   use   ntb   mouse   tom   color   bottom   cli   rip   

原文地址：http://www.cnblogs.com/-wxs-/p/6714290.html