用js寫簡單選項卡

阿新 • • 發佈：2019-01-20

如圖，最簡單的純粹的選項卡

第一步，當然是先寫html程式碼和css樣式

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>無標題文件</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t 
{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff; 
}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}</style>
</head>

<body>

<div class="wrap">
  <ul id="tab_t">
    <li class="act">選擇1</li>
    <li>選擇2</li>
    <li>選擇3</li>
    <li>選擇4</li>
  </ul>
  <div  
id="tab_c">
    <div>內容1</div>
    <div class="hide">內容2</div>
    <div class="hide">內容3</div>
    <div class="hide">內容4</div>
  </div>
</div>  
  
</body>
</html>

第二步，實現簡單的切換效果

要點1：abc.document.getElementsByTagName("li")：取得abc下面的所有標籤為li的元素，返回的是一個元素集合，有陣列的一些屬性。

要點2：迴圈，先迴圈給li加上onclick事件，再onlink事件點選的時候，再迴圈讓所有選項卡的act樣式去掉，所有的內容隱藏。然後讓所點選的選項及對應內容顯示。

要點3：tab_t_li[i].index = i; 在迴圈時，給選項卡加一個額外的屬性並賦值，以做選項卡和內容的對應。

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>無標題文件</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}</style>
<script>
window.onload = function(){
  var tab_t = document.getElementById("tab_t");
    var tab_t_li = tab_t.getElementsByTagName("li");
  var tab_c = document.getElementById("tab_c");
    var tab_c_li = tab_c.getElementsByTagName("div");
    var len = tab_t_li.length;
    var i=0;
    
    for(i=0; i<len; i++){
      tab_t_li[i].index = i;
      tab_t_li[i].onclick = function(){
          for(i=0; i<len; i++){
              tab_t_li[i].className = '';
                tab_c_li[i].className = 'hide';
            }
            tab_t_li[this.index].className = 'act';
            tab_c_li[this.index].className = '';
        }
    }
    
}
</script>
</head>

<body>

<div class="wrap">
  <ul id="tab_t">
    <li class="act">選擇1</li>
    <li>選擇2</li>
    <li>選擇3</li>
    <li>選擇4</li>
  </ul>
  <div id="tab_c">
    <div>內容1</div>
    <div class="hide">內容2</div>
    <div class="hide">內容3</div>
    <div class="hide">內容4</div>
  </div>
</div>  
  
</body>
</html>

第三步，寫成函式。上面的寫法只能一個頁面用一個選項卡，如果再加一個的話，就需要複製一份，再改很多變數名。

要點：tab_t_li[i][evt] 因為傳值的時候是字串，如果直接寫的話就是tab_t_li[i]."onclick"這樣話是執行不了的，tab_t_li["onclick"]這樣執行沒問題。

好了，現在一個頁面上就可以有多個切換了，只需要呼叫函式的時候，寫上相應的id名和標籤名，事件名稱就可以了

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>無標題文件</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}</style>
<script>
window.onload = function(){

    tab("tab_t","li","tab_c","div","onmouseover")
    function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
        var tab_t = document.getElementById(tab_t);
        var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
        var tab_c = document.getElementById(tab_c);
        var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
        var len = tab_t_li.length;
        var i=0;
        for(i=0; i<len; i++){
            tab_t_li[i].index = i;
            tab_t_li[i][evt] = function(){
                for(i=0; i<len; i++){
                    tab_t_li[i].className = '';
                    tab_c_li[i].className = 'hide';
                }
                tab_t_li[this.index].className = 'act';
                tab_c_li[this.index].className = '';
            }
        }
    }
    
}
</script>
</head>

<body>

<div class="wrap">
  <ul id="tab_t">
    <li class="act">選擇1</li>
    <li>選擇2</li>
    <li>選擇3</li>
    <li>選擇4</li>
  </ul>
  <div id="tab_c">
    <div>內容1</div>
    <div class="hide">內容2</div>
    <div class="hide">內容3</div>
    <div class="hide">內容4</div>
  </div>
</div>  
  
</body>
</html>

用js寫簡單選項卡

如圖，最簡單的純粹的選項卡第一步，當然是先寫html程式碼和css樣式 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>無標題文件</title> &

用js寫簡單頁面

var username=document.getElementsByClassName("username")[0]; var pwd=document.getElementsByClassName("password")[0]; v

原生js寫一個選項卡

html程式碼： <h2 class="active">選項卡1</h2> <h2>選項卡2</h2> <h2>選項卡3</h2>

寫個選項卡用bootstrap 幾行程式碼就搞定了

<ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#A" data-toggle="tab"> A選項卡

怎麽用cookie做一個選項卡？

eight splay i++ 作用 code round tab 多網站個性化什麽是cookie? Cookies雖然一般都以英文名呈現，但是它還是有一個可愛的中文名“小甜餅”。Cookies是指服務器暫存放在你的電腦裏的txt格式的文本文件資料，主要用

js原生實現選項卡功能

doc pre pan element gre rip class isp height 結構：<div id="box"> 　　<input type="button" value="書籍" class="on"> 　　<in

js常用特效——選項卡效果

weight ont pad absolut cursor asc spa cto clear 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset

原生js三種選項卡效果（輪播）

col val 還在 log pla absolut 自動播放 div pac 第三種：定時輪播切換（我這邊定時是2s） <!DOCTYPE html> <html> <head> <meta charset="utf-8"

原生js三種選項卡效果（點擊）

eight void log utf 觸發 nts lin type position 第一種：選項卡單擊點擊切換 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g

原生js三種選項卡效果（滑動）

window solid nts html opacity ont cor rip show 第二種：鼠標移入切換效果實現 <!DOCTYPE html> <html> <head> <meta charset

純JS制作選項卡--JavaScript實例集錦（初學）

不用 () body tel bsp classname nload html spl 最近重新從最基礎學習JavaScript，如同蓋房，先要打好基礎，一磚一瓦都很重要。下面我來嘚吧幾句，附上從書上學到的實例與效果。 JS可以用面向過程去寫，也可以使用面向對象。面向對象

Jquery實現簡單選項卡

gre 第一個 tex PE 一個 back remove jquery splay <html> <head> <meta charset="UTF-8"> <title>選項卡</title> <scr

用JS寫，根據用戶輸入的年月份判斷是這年的第幾天

nth || AD lse quest 輸入判斷 ear 月份 console.log("輸入年份："); let year = readline.question() - 0; console.log("輸入一個月份"); let month = readline.q

用js寫水仙花數

amp == 位數等於 parse lse div 就是 () ...js //輸入一個三位數，水仙花數就是個位的三次方+十為的三次方+百位的三次方之和等於本身 console.log(‘請輸入一個三位數：‘); let a = readline.question(

簡單選項卡

選項 html 當前上海 scrip mage 獲取演員 pan 簡單選項卡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

用js寫tab頁面

原理：依據bootStrap框架的tab頁樣式：原生態的是這樣： <!DOCTYPE html> <html> <head> <me

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寫一個秒錶

首先，先鋪好格式 <input type="text" name="" id="shuzi" value="00:00:00" /><br /> <input onclick="ks()" type="button" name="" id="kaishi" value

用js寫一個秒表

tel 我們 java name func 取余 NPU 定時器1 cli 首先，先鋪好格式 <input type="text" name="" id="shuzi" value="00:00:00" /><br /> <input o

用js寫簡單選項卡

相關推薦