点击选项卡内容切换代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击选项卡内容切换代码相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="utf-8"> <title>TAB切换</title> <script src="12.js"></script> <link type="text/css" rel="stylesheet" href="12.css"> <script language="javascript"> function selectTag(showContent,selfObj){ // 标签6a8a.com var tag = document.getElementById("tags").getElementsByTagName("li"); var taglength = tag.length; for(i=0; i<taglength; i++){ tag[i].className = ""; } selfObj.parentNode.className = "current"; // 标签内容 for(i=0; j=document.getElementById("tagContent"+i); i++){ j.style.display = "none"; } document.getElementById(showContent).style.display = "block"; } window.onload={ } </script> <!-- <script language="javascript"> } function selectTag(showContent,selfObj){ // 标签6a8a.com var tag = document.getElementById("tags").getElementsByTagName("li"); var taglength = tag.length; for(i=0; i<taglength; i++){ tag[i].className = ""; } selfObj.parentNode.className = "current"; // 标签内容 for(i=0; j=document.getElementById("tagContent"+i); i++){ j.style.display = "none"; } document.getElementById(showContent).style.display = "block"; } </script> --> </head> <body> <!-- 代码开始 --> <div class="content"> <ul class="ss" id="tags"> <li class="current"><a A onClick="selectTag(‘tagContent0‘,this)" href="javascript:void(0)">公司新闻</a></li> <li ><a onClick="selectTag(‘tagContent1‘,this)" href="javascript:void(0)">行业新闻</a></li> </ul> <div id="tagContent"> <div class="one tagContent" id="tagContent0"> 内容1 </div> <div class="tagContent" id="tagContent1"> 内容2 </div> <!-- 代码结束 --> </body> </html>
*{ margin:0px; padding:0px;list-style:none; font-size:14px; text-decoration:none;}
.content{ width:443px; margin:auto; }
.ss{ border-bottom: solid 1px #d3d3d3; height:25px; width:443px;}
.ss li{ float: left; width:101px; height:25px; line-height:25px; text-align:center; }
.ss li a{font-weight:bold; color:#000; display:block; }
.ss li a:hover{ text-decoration:none}
.ss .current{ background:#ccc;}
.ss .current a{color:#fff;}
.tagContent{ display:none}
.one { display:block}以上是关于点击选项卡内容切换代码的主要内容，如果未能解决你的问题，请参考以下文章