<div id="show">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div id="click">
<div>click1</div>
<div>click2</div>
<div>click3</div>
</div>
要求:1,点击click1,show对应显示1(2,3消失)
2,与此同时,click1的样式改变
3,点击其它click,显示类似
<script type="text/javascript"> window.onload = function() { var click_divs = document.getElementById("click") .getElementsByTagName("div"); var show_divs = document.getElementById("show") .getElementsByTagName("div"); for(var i = 0; i < click_divs.length; i++) { !function(a) { // 点击 #click div click_divs[a].onclick = function() { // #show div 全部隐藏 for(var x = 0; x < show_divs.length; x++) { show_divs[x].style.display = "none"; } // 对应 #show div 显示 show_divs[a].style.display = "block"; // #click div 样式还原 for(var y = 0; y < show_divs.length; y++) { click_divs[y].style.fontWeight = "Normal"; } // 对应 #click div 样式加粗 click_divs[a].style.fontWeight = "Bold"; }; }(i); } }; </script>
/*所有显示内容的div的集合*/ var show_divs; /*获取id="show-divs"的div子节点,(火狐会比IE多几个子节点,因为把换行算进去了!所以要做一个判断来删除非div的子节点)*/ function del_ff(show){ var show_div = show.childNodes; for(var i=0; i<show_div.length;i++){ if(show_div[i].nodeName == "#text" && !/\s/.test(show_div.nodeValue)){ show.removeChild(show_div[i]); } } show_divs=show_div; }
<div id="show-divs" class="c-right-c-conter"> <div class="oath" style="display: block;text-align:center;"> <img alt="loading" src="/images/zhdj/dwbbx-join_party_oath.jpg" /> </div> <div class="constitution" style="width:100%;height:520px; display: none; font-size: 14px; line-height: 30px;"> <%@include file="dwbbx-constitution.jsp" %> </div> <div class="emblem" style="width:100%;height:520px; display: none; font-size: 14px; line-height: 30px;"> <%@include file="dwbbx-emblem.jsp" %> </div> <div class="flag" style="width:100%;height:520px; display: none; font-size: 14px; line-height: 30px;"> <%@include file="dwbbx-flag.jsp" %> </div> <div class="rule" style="width:100%;height:520px; display: none; font-size: 14px; line-height: 30px;"> <%@include file="dwbbx-rule.jsp" %> </div> </div>