【js基礎】Tab選項卡切換效果實現

阿新 • • 發佈：2019-02-04

<!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>
    <div id="tab">
        <div 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>
        </div>
        <div id="tab-contain">
            <div  class="mod">
                <ul>
                    <li><a href="#">走進無聲課堂</a></li 
>
                    <li><a href="#">淘寶之行大眾評審</a></li>
                    <li><a href="#">愛心品牌聯合徵集</a></li>
                    <li><a href="#">公益機構淘寶攻略</a></li>
                </ul>
            </div>
            <div  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>
            </div>
            <div  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>
            </div>
            <div  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>
            </div>
            <div  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>
            </div>
        </div>
    </div>
</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==='string'?document.getElementById(id):id;
}
window.onload=function(){
    var navs=$('tab-nav').getElementsByTagName('li');
    var divs=$('tab-contain').getElementsByTagName('div');
    // alert(divs.length);
    if(navs.length!=divs.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="";
                divs[j].style.display="none";

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

}

這裡寫圖片描述

【js基礎】Tab選項卡切換效果實現

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

純JS實現tab選項卡切換效果

今天學到的用js寫選項卡，有高亮效果，廢話不多說，直接上程式碼吧！！！注意事項：css程式碼中有一個隱藏其他div的屬性， display: none;這個一定要注意，要不然你寫的都會顯示出來 html程式碼： <!DOCTYPE html> <html la

tab選項卡切換效果（一）——滑過切換和點選切換

JS程式碼如下： <script> function tabMove(){ //獲取滑鼠滑過或點選的標籤和要切換的內容分類元素 var divId01=document

Tab選項卡切換效果

tab選項卡是網頁中最常見的切換效果，常見的tab切換型別有：滑鼠滑過切換、點選切換、延遲切換、以及自動切換。html結構： <div class="notice"> <

Android仿微信底部實現Tab選項卡切換效果

在網上看了比較多的關於Tab的教程，發現都很雜亂。比較多的用法是用TitlePagerTabStrip和ViewPaper。不過TitlePagerTabStrip有個很大的缺陷，Tab裡面的內容剛進去是沒有的，要滑一次才能加載出來。而且滑動的時候，Tab裡面的內容位置

【jQuery】Tab選項卡（li之間的切換）

演示地址：暫未開放，請前往線上程式碼測試網測試程式碼如下：固定格式在這裡就省略了，如果有問題大家可以自行調整。 No.1 jQuery版 <html> <

js實現tab選項卡切換

　　通過原生js實現tab切換，首先講解一下實現的原理。　　　　1.點選按鈕首先給這個被點選的按鈕新增一個active類，給點選的改變背景色　　　　2.點選按鈕其實就是把相應的div給顯示出來。　　　　需要注意的是，點選按鈕，給按鈕添加了一個類和把對應的div給顯示，需要把上一個點選的按鈕顏色還原

原生js實現tab選項卡切換功能

本文通過兩種原生js方法實現tab選項卡切換功能 <!DOCTYPE html> <html> <head> <title>tab選項卡</title> <meta charset="utf-8"> <s

【 js 基礎】作用域和閉包

代碼 var 垃圾回收器間接 undefined scrip 運行時例子解析一、編譯過程常見編譯性語言，在程序代碼執行之前會經歷三個步驟，稱為編譯。步驟一：分詞或者詞法分析將由字符組成的字符串分解成有意義的代碼塊，這些代碼塊被稱為詞法單元。例子： v

【 js 基礎】Javascript “繼承”

一份類繼承屬性。淺拷貝創建生成特殊並不會也會【 js 基礎】Javascript “繼承” 是時候寫一寫 “繼承”了，為什麽加引號，因為當你閱讀完這篇文章，你會知道，說是繼承其實是不準確的。一、類1、傳統的面向類的語言中的類：類／繼承描述

【 js 基礎】為什麽 call 比 apply 快？

如果分享叠代 [1] get blank 3.4 -a case 這是一個非常有意思的問題。在看源碼的過程中，總會遇到這樣的寫法： 1 var triggerEvents = function(events, args) { 2 var ev, i

原生JS畫的tab選項卡

記錄 bsp back height 原生js .class lis get function 記錄一下原生js寫的tab選項卡鼠標滑入可以切換圖片離開之後自動切換 <!DOCTYPE html> <html lang="en"> &l

【 js 基礎】【源碼學習】柯裏化和箭頭函數

新的執行 pos inner 自己的文件中柯裏化 clas 而已最近在看 redux 的源碼，代碼結構很簡單，主要就是6個文件，其中 index.js 負責將剩余5個文件中定義的方法 export 出來，其他5個文件各自負責一個方法的實現。大部分代碼比較簡單，很

AxureRP分頁簽 / Tab選項卡切換功能~

info 雙擊加背景編輯 alt idt 拖動選項卡切換調整最終結果圖如下：實現過程： 1、從元件庫中拖一個動態面板，調整所需大小，接下來的步驟都通過雙擊動態面板來完成。 2、雙擊動態面板，彈出框“面板狀態管理”，新建狀態並命名。此處新建了TAB1、TAB2、T

用html+css+js實現選項卡切換效果

window.onload = function () { chang(); var myTab = document.getElementById("gameDevelopment"); //整個div var myUl = myTab.getElementsByTagName("ul")[0];//一個