欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS+CSS實現(xiàn)的經(jīng)典tab選項卡效果代碼

 更新時間：2015年09月16日 10:52:39   作者：企鵝  
這篇文章主要介紹了JS+CSS實現(xiàn)的經(jīng)典tab選項卡效果代碼,通過簡單的鼠標(biāo)事件觸發(fā)js函數(shù)實現(xiàn)針對頁面元素的遍歷與樣式變換功能,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了JS+CSS實現(xiàn)的經(jīng)典tab選項卡效果代碼。分享給大家供大家參考。具體如下：

這是一款經(jīng)典的JavaScript+CSS tab選項卡代碼，由以前的一款改寫而成，自認(rèn)為不錯的東西，發(fā)上來分享吧。

運行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-css-jd-tab-cha-style-codes/

具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>選項卡</title>
<script type="text/javascript"> 
</script>
<style type="text/css"> 
 * { margin:0; padding:0; word-break:break-all; }
 h1, h2, h3, h4, h5, h6 { font-size:1em; }
 a { color:#333; text-decoration:none; }
 a:hover { text-decoration:underline; }
 ul, li { list-style:none; }
 fieldset, img { border:none; }
 #hotnews { width:260px; margin:1px; margin-left:auto; margin-right:auto;font-size:12px;}
 #hotnews_caption { width:260px; overflow:hidden; border-bottom:1px solid #FAFAFA; }
 #hotnews_caption ul { float:right; }
 #hotnews_caption ul li { float:left; border-left:1px solid #FFF; width:85px; line-height:25px; text-align:center; cursor:pointer;font-size:12px; }
 #hotnews_caption .normal { background:#E4E4E4; }
 #hotnews_caption .current{ background:#C2130E; color:#FFF; }
 #hotnews_content {}
 #hotnews_content .normal { display:none; }
 #hotnews_content .current { display:block; }
 #hotnews_content ul { padding:8px 0 0 5px; }
 #hotnews_content ul li a { font-size:12px;letter-spacing:1pt;line-height:14pt;}
</style>
<script type="text/javascript"> 
function secBoard(elementID,listName,n) {
 var elem = document.getElementById(elementID);
 var elemlist = elem.getElementsByTagName("li");
 for (var i=0; i<elemlist.length; i++) {
 elemlist[i].className = "normal";
 var m = i+1;
 document.getElementById(listName+"_"+m).className = "normal";
 }
 elemlist[n-1].className = "current";
 document.getElementById(listName+"_"+n).className = "current";
}
</script>
</head>
<body style=" margin-top:15px;">
<div id="hotnews">
 <div id="hotnews_caption">
 <ul>
  <li class="current" onmouseover="secBoard('hotnews_caption','list',1);">數(shù)字商務(wù)平臺</li>
  <li class="normal" onmouseover="secBoard('hotnews_caption','list',2);">4GFax傳真服務(wù)</li>
  <li class="normal" onmouseover="secBoard('hotnews_caption','list',3);">信息安全服務(wù)</li>
 </ul>
 </div>
 <div id="hotnews_content">
 <div class="current" id="list_1">
  <ul>
  <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="products.aspx" target="_top">全真通數(shù)字商務(wù)平臺是基于PKI體系，通過加密、簽名、認(rèn)證等手段，依據(jù)我國的數(shù)字簽名法，在Internet上建立的一套安全、可信、具有法律效力的電子文件交換平臺。為數(shù)字商務(wù)和數(shù)字政務(wù)服務(wù)！是我國數(shù)字簽名法最有價值的推廣應(yīng)用產(chǎn)品！</a></li>  
  </ul> 
 </div>
 <div class="normal" id="list_2">
  <ul>
  <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="products.aspx" target="_top">基于數(shù)字中繼和模擬線路并結(jié)合互聯(lián)網(wǎng)形成了面向企業(yè)和政府用戶傳真收發(fā)服務(wù)的傳真服務(wù)系統(tǒng)，集傳真的管理和收發(fā)于一體，為企業(yè)和政府提供智能傳真解決方案。</a></li>
  </ul>
 </div>
 <div class="normal" id="list_3">
  <ul>
  <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="products.aspx" target="_top">基于PKI體系，結(jié)合數(shù)字證書的應(yīng)用為企業(yè)和政府提供的身份認(rèn)證、加密、簽名的技術(shù)解決方案，實現(xiàn)用戶身份的可鑒別性、通道的安全性、文件的安全性、主機的安全性等系列產(chǎn)品。</a></li>
  </ul>
 </div>
 </div>
</div>
</body>
</html>

希望本文所述對大家的JavaScript程序設(shè)計有所幫助。

相關(guān)文章

最新評論