JS實現Tab選項卡切換效果的範例程式碼-js教程-PHP中文網

首頁

web前端

js教程

JS實現Tab選項卡切換效果的範例程式碼

黄舟

Oct 21, 2017 am 09:58 AM

javascript 效果範例

html部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="tab.css">
  <script src="tab.js"></script>
  <title>Document</title>
</head>
<body>
  <p id="tab">
    <p id="tab-nav" class="tab-nav">
      <ul>
        <li class="active"><a href="#">公告</a></li>
        <li><a href="#">规则</a></li>
        <li><a href="#">论坛</a></li>
        <li><a href="#">安全</a></li>
        <li><a href="#">公益</a></li>
      </ul>
    </p>
    <p id="tab-contain">
      <p class="mod">
        <ul>
          <li><a href="#">走进无声课堂</a></li>
          <li><a href="#">淘宝之行大众评审</a></li>
          <li><a href="#">爱心品牌联合征集</a></li>
          <li><a href="#">公益机构淘宝攻略</a></li>
        </ul>
      </p>
      <p class="mod" style="display:none">
        <ul>
          <li><a href="#">[聚焦]金牌卖家再启航</a></li>
          <li><a href="#">[功能]橱柜规则升级啦</a></li>
          <li><a href="#">[话题]又爱又恨优惠券</a></li>
          <li><a href="#">[工具] 购后送店铺红包</a></li>
        </ul>
      </p>
      <p class="mod" style="display:none">
        <ul>
          <li><a href="#">张勇：要玩快乐足球</a></li>
          <li><a href="">阿里2000万驰援灾区</a></li>
          <li><a href="">旅游宝让你边玩</a></li>
          <li><a href="">多行跟进阿里信用贷款</a></li>
        </ul>
      </p>
      <p class="mod" style="display:none">
        <ul>
          <li><a href="">[通知] “泛滥换新”</a></li>
          <li><a href="">[通知]“比特币严管”</a></li>
          <li><a href="">[通知]“禁发商品”</a></li>
          <li><a href="">[通知]“商品属性”</a></li>
        </ul>
      </p>
      <p class="mod" style="display:none">
        <ul>
          <li><a href="#">走进无声课堂</a></li>
          <li><a href="#">淘宝之行大众评审</a></li>
          <li><a href="#">爱心品牌联合征集</a></li>
          <li><a href="#">公益机构淘宝攻略</a></li>
        </ul>
      </p>
    </p>
  </p>
</body>
</html>

登入後複製

css部分

*{
 padding:0px;
 margin:0px;
 list-style: none;
 font-size: 14px;
}
#tab{
 width:298px;
 height:120px;
 margin:10px;
 border:1px solid #eee;
 overflow: hidden;
}
.tab-nav{
 width:400px;
 position:relative;
 height:27px;

}
.tab-nav ul{
 position:absolute;
 width:301px;
 left:-1px;
 background-color: #f7f7f7;
}
.tab-nav li{
 float:left;
 width:58px;
 padding: 0 1px;
 height:36px;
 background-color: #f7f7f7;
 border-bottom: 1px solid #eee;
 text-align: center;
}
.tab-nav li.active{
 background-color: #fff;
 border-bottom-color:#fff;
 border-left: 1px solid #eee;
 border-right: 1px solid #eee;
 padding:0px;
 font-weight: bolder;
}
li a:link,li a:visited{
 text-decoration: none;
 color:#000;
}
#tab-contain .mod{
 margin:25px 6px 10px 6px;
}
#tab-contain .mod ul li{
 float: left;
 width:143px;
 height:25px;
 overflow: hidden;
}

登入後複製

Js部分

function $(id){
 return typeof id===&#39;string&#39;?document.getElementById(id):id;
}
window.onload=function(){
 var navs=$(&#39;tab-nav&#39;).getElementsByTagName(&#39;li&#39;);
 var ps=$(&#39;tab-contain&#39;).getElementsByTagName(&#39;p&#39;);
 // alert(ps.length);
 if(navs.length!=ps.length){
  return;
 }
 for(var i=0;i<navs.length;i++){
  navs[i].title=i;
  navs[i].onmouseover=function(){
   for(var j=0;j<navs.length;j++){
    navs[j].className="";
    ps[j].style.display="none";

   }
   this.className="active";
   ps[this.title].style.display="block";
  }
 }

}

登入後複製

以上是JS實現Tab選項卡切換效果的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7861

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1242

Related knowledge

用戶遭遇罕見故障三星 Watch 智慧手錶突現白螢幕問題 Apr 03, 2024 am 08:13 AM

你可能遇到過智慧型手機螢幕出現綠色線條的問題，即使沒看過，也一定在網路上看過相關圖片。那麼，智慧手錶螢幕變白的情況你有遇見過嗎？ 4月2日，CNMO從外媒了解到，一名Reddit用戶在社群平台上分享了一張圖片，展示了三星Watch系列智慧手錶螢幕變白的情況。該用戶寫道："我離開時正在充電，回來時就這樣了，我嘗試重啟，但重啟過程中屏幕還是這樣。"三星Watch智能手錶屏幕變白這位Reddit用戶並未指明這款智能手錶的具體型號。不過，從圖片上看，應該是三星Watch5。此前，另一位Reddit用戶也報告

九州風神阿薩辛 4S 散熱器評測風冷「刺客大師」範兒 Mar 28, 2024 am 11:11 AM

說起阿薩辛ASSASSIN，相信玩家們一定會想到《刺客信條》中的各位刺客大師，不僅身手了得，而且"躬身於黑暗、服務於光明"的信條，與國內知名機箱/電源/散熱器品牌九州風神（DeepCool）旗下的阿薩辛ASSASSIN系列旗艦級風冷散熱器不謀而合。最近，該系列的最新產品阿薩辛ASSASSIN4S重磅上線，"西裝刺客，再進階"為高級玩家帶來全新的風冷散熱體驗。外觀一覽細節滿滿阿薩辛4S散熱器採用雙塔構造+單風扇內嵌設計，外麵包覆立方體造型的整流罩，整體感極強，並提供白、黑兩種配色可選，滿足不同色系

輕鬆拿捏 4K 高畫質影像理解！這個多模態大模型自動分析網頁海報內容，打工人簡直不要太方便 Apr 23, 2024 am 08:04 AM

一個可以自動分析PDF、網頁、海報、Excel圖表內容的大模型，對於打工人來說簡直不要太方便。上海AILab，香港中文大學等研究機構提出的InternLM-XComposer2-4KHD（簡寫為IXC2-4KHD）模型讓這一切成為了現實。相較於其他多模態大模型不超過1500x1500的分辨率限制，該工作將多模態大模型的最大輸入影像提升到超過4K（3840x1600）分辨率，並支援任意長寬比和336像素～4K動態解析度變化。發布三天，模型就登頂HuggingFace視覺問答模型熱度排行榜第一。輕鬆拿捏

航空嘉 MX750P 全模組電源評測：750W 的白金實力濃縮 Mar 28, 2024 pm 03:20 PM

ITX平台以小巧的身形吸引了許多追求極致和獨特美感的玩家，隨著製程的提升和技術的進步，英特爾第14代酷睿和RTX40系顯卡都可以在ITX平台中發揮實力，遊戲玩家也對SFX電源有了更高的要求。遊戲愛好者航空嘉推出新的MX系列電源，在滿足高效能需求的ITX平台中，MX750P全模組電源的定額功率高達750W，同時通過了80PLUS白金級認證。以下我們就帶來這款電源的評測。航嘉MX750P全模組電源採用了簡約時尚的設計理念，共有黑白兩款供玩家選擇，均採用磨砂表面處理，搭配銀灰色和紅色的字體有很好的質感，

春日裡的精緻光影藝術，哈趣 H2 性價比之選 Apr 17, 2024 pm 05:07 PM

隨著春天的到來，萬物復甦，一切都充滿了生命與活力。在這個美好的季節裡，如何為居家生活增添一抹別樣的色彩？哈趣H2投影儀，以其精緻的設計和超高的性價比，成為了這個春天裡不可或缺的一道亮麗風景。這款H2投影機小巧玲瓏卻不失時尚。無論是放在客廳的電視櫃上，或是臥室的床頭櫃旁，都能成為一道明亮的風景線。它的機身採用了奶白色的磨砂質地，這種設計不僅讓投影機的外觀更顯高級，同時也增加了觸感的舒適度。米色仿皮紋材質，更為整體外觀增添了一抹溫馨與雅緻。這種色彩與材質的搭配，既符合現代家居的美感趨勢，又能融入

Oracle DECODE函數詳解及用法範例 Mar 08, 2024 pm 03:51 PM

Oracle中的DECODE函數是一種條件式，常用於在查詢語句中根據不同的條件傳回不同的結果。本文將詳細介紹DECODE函數的語法、用法和範例程式碼。一、DECODE函數語法DECODE(expr,search1,result1[,search2,result2,...,default])expr：要進行比較的表達式或欄位。 search1,

七彩虹隱星 P15 24 評測：顏值性能兼具的硬蕊全能遊戲本 Mar 06, 2024 pm 04:40 PM

在當下科技快速發展的時代，筆記型電腦已成為人們日常生活和工作中不可或缺的重要工具。對於那些對性能有高要求的玩家而言，擁有配置強大、性能出色的筆記型電腦才能滿足其硬核需求。七彩虹隱星P15筆記型電腦憑藉其卓越性能和令人驚豔的設計，成為了未來的引領者，堪稱硬核筆記本的典範。七彩虹隱星P1524配備了13代英特爾酷睿i7處理器和RTX4060LaptopGPU，外觀採用更時尚的太空船設計風格，同時在細節表現上也有出色表現。讓我們先來了解這款筆記本的特點。至高搭載英特爾酷睿i7-13620H處理

Go語言的縮排規範及範例 Mar 22, 2024 pm 09:33 PM

Go语言的缩进规范及示例Go语言是一种由Google开发的编程语言，它以简洁、清晰的语法著称，其中缩进规范在代码的可读性和美观性方面起着至关重要的作用。本文将介绍Go语言的缩进规范，并通过具体的代码示例进行详细说明。缩进规范在Go语言中，缩进使用制表符（tab）而非空格。每级缩进为一个制表符，通常设置为4个空格的宽度。这样的规范统一了代码风格，使得团队合作编

See all articles

JS實現Tab選項卡切換效果的範例程式碼

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題