js选项卡制作

来源：互联网发布：大数据相关视频编辑：程序博客网时间：2024/06/07 23:52

初学js，写了一个很简单但是很实用的一个选项卡，如有不足请多多拍砖，共同进步。

<!doctype html><html><head><meta charset="utf-8"><title>css3.0综合练习</title><style type="text/css">body, div, p, ul, li, span, a {margin: 0;padding: 0;list-style-type: none;}#myTab {margin: 50px auto;width: 480px;height: 200px;border: 1px solid #666;}/* tab_title */.tab_bl_t, .tab_bl_c { overflow: hidden; }.tab_bl_t > li {float: left;height: 40px;width: 119px;border-left: 1px solid #666;border-bottom: 1px solid #666;line-height: 40px;text-align: center;cursor: pointer;background: #CCC;}.tab_bl_t > li:first-child { border-left: none; }.tab_bl_t > li:hover {font-weight: 700;background: #DEDEDE;}.tab_bl_t > li.cur {border-bottom: none;background: #FFF;border-top:1px solid #0F0;}/* tab_content */.tab_bl_c > li {padding: 10px 15px;display: none;}.tab_bl_c > li.cur { display: block; }</style></head><body><div id="myTab">  <ul id="myTab_titles" class="tab_bl_t">    <li>2012</li>    <li class="cur">2013</li>    <li>2014</li>    <li>2015</li>  </ul>  <ul id="myTab_contents" class="tab_bl_c">    <li>2012大事记……</li>    <li class="cur">2013大事记……</li>    <li>2014大事记……</li>    <li>2015大事记……</li>  </ul></div></body></html><script type="text/javascript">var t_titles = document.getElementById("myTab_titles").getElementsByTagName("li");var t_contents = document.getElementById("myTab_contents").getElementsByTagName("li");for(var i=0; i<t_titles.length; i++){t_titles[i].index = i;t_titles[i].onclick = function(){for(var j=0; j<t_titles.length; j++){t_titles[j].className = "";t_contents[j].className = "";}this.className = "cur";t_contents[this.index].className = "cur";}}</script>

0 0