首页 > 蚂蚁部落 > 正文

原生js tab选项卡代码实例
2017-08-29 10:14:46   来源:   评论:0 点击:

分享一段代码实例,它使用原生javascript实现了tab选项卡功能。代码实例如下:[HTML] 纯文本查看 复制代码& 36816;& 34892;& 20195;& 3072

分享一段代码实例,它使用原生javascript实现了tab选项卡功能。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">* {  margin: 0px;  padding: 0px;  list-style: none;}a, a:hover {  text-decoration: none;}.fl {  float: left;}#divMainTab {  margin: 20px 20px 0px 20px;}.normal {  float: left;  width: auto;  height: 40px;  text-align: center;  vertical-align: middle;  cursor: pointer;}.normal a {  width: auto;  height: 40px;  line-height: 40px;  display: block;  color: #505050;  font-size: 16px;  text-align: center;  padding: 0px 15px;  background: #f8f6f4;  border-top: 1px solid #dbd6d0;  border-right: 1px solid #dbd6d0;}.selected {  float: left;  width: auto;  text-align: center;  cursor: pointer;}.selected a {  width: auto;  height: 40px;  line-height: 40px;  display: block;  background: #ffffff;  border-right: 1px solid #dbd6d0;  border-top: 1px solid #dbd6d0;  border-bottom: 1px solid #fff;  color: #ff6600;  font-size: 16px;  text-align: center;  padding: 0px 15px;}.selected a:hover {  text-decoration: none;}#divMainTab {  height: 41px;  display: block;  overflow: hidden;  border-bottom: 1px solid #dbd6d0;}#divMainTab ul {  width: auto;  height: 40px;  float: left;  border-left: 1px solid #dbd6d0;}.divContent {  height: 100%;  overflow: hidden;  margin: 20px;  margin-top: 0px;  border: 1px solid #dbd6d0;  border-top: 0px;  padding: 20px;}</style><script>function changeTab(index){  for (var i=1;i<=5;i++){    document.getElementById ("li_"+i).className ="normal";    document.getElementById ("li_"+index).className ="selected";    document.getElementById ("div"+i).style.display  ="none";  }  document.getElementById ("div"+index).style.display  ="block";}</script></head><body><div id="divMainTab">  <ul class="fl">    <li id="li_1" class="selected" onmouseover="changeTab('1')"><a href="#">蚂蚁部落一</a> </li>    <li id="li_2" class="normal" onmouseover="changeTab('2')"><a href="#">蚂蚁部落二</a> </li>    <li id="li_3" class="normal" onmouseover="changeTab('3')"><a href="#">蚂蚁部落三</a> </li>    <li id="li_4" class="normal" onmouseover="changeTab('4')"><a href="#">蚂蚁部落四</a> </li>    <li id="li_5" class="normal" onmouseover="changeTab('5')"><a href="#">蚂蚁部落五</a> </li>  </ul></div><div id="div1" style="display:block" class="divContent">div教程</div><div id="div2" style="display:none" class="divContent">css教程</div><div id="div3" style="display :none" class="divContent">ajax教程</div><div id="div4" style="display :none" class="divContent">jquery教程</div><div id="div5" style="display :none" class="divContent">json教程</div></body></html>

相关热词搜索:

上一篇:兼容低版本IE的document.getElementsByClassName()
下一篇:scrollHeight和scrollWidth浏览器兼容

分享到: 收藏
评论排行