JS CSS實現的經典tab選項卡效果代碼_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

JS CSS實現的經典tab選項卡效果代碼_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:39 PM

css js tab 選項卡

本文實例講述了JS CSS實現的經典tab選項卡效果代碼。分享給大家供大家參考。具體如下：

這是一款經典的JavaScript CSS tab選項卡程式碼，由以前的一款改寫而成，自認為不錯的東西，寄上來分享吧。

運作效果截圖如下：

線上示範網址如下：

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);">数字商务平台</li>
  <li class="normal" onmouseover="secBoard('hotnews_caption','list',2);">4GFax传真服务</li>
  <li class="normal" onmouseover="secBoard('hotnews_caption','list',3);">信息安全服务</li>
 </ul>
 </div>
 <div id="hotnews_content">
 <div class="current" id="list_1">
  <ul>
  <li>        <a href="products.aspx" target="_top">全真通数字商务平台是基于PKI体系，通过加密、签名、认证等手段，依据我国的数字签名法，在Internet上建立的一套安全、可信、具有法律效力的电子文件交换平台。为数字商务和数字政务服务！是我国数字签名法最有价值的推广应用产品！</a></li>  
  </ul> 
 </div>
 <div class="normal" id="list_2">
  <ul>
  <li>        <a href="products.aspx" target="_top">基于数字中继和模拟线路并结合互联网形成了面向企业和政府用户传真收发服务的传真服务系统，集传真的管理和收发于一体，为企业和政府提供智能传真解决方案。</a></li>
  </ul>
 </div>
 <div class="normal" id="list_3">
  <ul>
  <li>        <a href="products.aspx" target="_top">基于PKI体系，结合数字证书的应用为企业和政府提供的身份认证、加密、签名的技术解决方案，实现用户身份的可鉴别性、通道的安全性、文件的安全性、主机的安全性等系列产品。</a></li>
  </ul>
 </div>
 </div>
</div>
</body>
</html>

登入後複製

希望本文所述對大家的JavaScript程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7749

Java教學

1643

CakePHP 教程

1397

Laravel 教程

1293

PHP教程

1234

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。