JS——tab函數封裝

阿新 • • 發佈：2017-11-22

show oat index 數組 img 500px func lock padding

1、為li標簽添加index屬性，這個屬性正好就是span標簽數組的index值

2、函數封裝適合頁面有多個tab切換，需要註意的在獲取的li標簽和span標簽對象時，必須將對應div對象作為參數傳入

li標簽添加index屬性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin:  
0;
        }

        .box1 {
            width: 500px;
            height: 400px;
            border: 1px solid #b6ff00;
            overflow: hidden;
            margin: 100px auto;
        }

        ul {
            width: 510px;
            height: 40px;
            list-style: none;
        }

        li {
             
float: left;
            width: 101px;
            height: 40px;
            text-align: center;
            font: 400 15px/40px "simsun";
            background-color: beige;
            cursor: pointer;
        }

        span {
            display: none;
            width: 500px;
            height: 360px;
            background 
-color: #ffd800;
            text-align: center;
            font: 700 150px/360px "simsun";
        }

        .current {
            background-color: #ffd800;
        }

        .show {
            display: block;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>鞋子</li>
            <li>上衣</li>
            <li>下裝</li>
            <li>棉衣</li>
            <li>夏裝</li>
        </ul>
        <span>鞋子</span>
        <span>上衣</span>
        <span>下裝</span>
        <span>棉衣</span>
        <span>夏裝</span>
    </div>
    <script>
        var lis = document.getElementsByTagName("li");
        var sps = document.getElementsByTagName("span");
        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i;
            lis[i].onmouseover = function () {
                for (var j = 0; j < lis.length; j++) {
                    lis[j].className = "";
                    sps[j].className = "";
                }
                this.className = "current";
                sps[this.index].className = "show";
            }
        }
    </script>
</body>
</html>

函數封裝版本

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 500px;
            height: 400px;
            border: 1px solid #b6ff00;
            overflow: hidden;
            margin: 100px auto;
        }

        ul {
            width: 510px;
            height: 40px;
            list-style: none;
        }

        li {
            float: left;
            width: 101px;
            height: 40px;
            text-align: center;
            font: 400 15px/40px "simsun";
            background-color: beige;
            cursor: pointer;
        }

        span {
            display: none;
            width: 500px;
            height: 360px;
            background-color: #ffd800;
            text-align: center;
            font: 700 150px/360px "simsun";
        }

        .current {
            background-color: #ffd800;
        }

        .show {
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>鞋子</li>
            <li>上衣</li>
            <li>下裝</li>
            <li>棉衣</li>
            <li>夏裝</li>
        </ul>
        <span>鞋子</span>
        <span>上衣</span>
        <span>下裝</span>
        <span>棉衣</span>
        <span>夏裝</span>
    </div>
    <div class="box">
        <ul>
            <li>鞋子</li>
            <li>上衣</li>
            <li>下裝</li>
            <li>棉衣</li>
            <li>夏裝</li>
        </ul>
        <span>鞋子</span>
        <span>上衣</span>
        <span>下裝</span>
        <span>棉衣</span>
        <span>夏裝</span>
    </div>
    <div class="box">
        <ul>
            <li>鞋子</li>
            <li>上衣</li>
            <li>下裝</li>
            <li>棉衣</li>
            <li>夏裝</li>
        </ul>
        <span>鞋子</span>
        <span>上衣</span>
        <span>下裝</span>
        <span>棉衣</span>
        <span>夏裝</span>
    </div>
    <script>
        var boxs = document.getElementsByClassName("box");
        for (var i = 0; i < boxs.length; i++) {
            tabSwitch(boxs[i]);
        }
        function tabSwitch(ele) {
            var lis = ele.getElementsByTagName("li");
            var sps = ele.getElementsByTagName("span");
            for (var i = 0; i < lis.length; i++) {
                lis[i].index = i;
                lis[i].onmouseover = function () {
                    for (var j = 0; j < lis.length; j++) {
                        lis[j].className = "";
                        sps[j].className = "";
                    }
                    this.className = "current";
                    sps[this.index].className = "show";
                }
            }
        }       
    </script>
</body>
</html>

技術分享圖片

JS——tab函數封裝

show oat index 數組 img 500px func lock padding 1、為li標簽添加index屬性，這個屬性正好就是span標簽數組的index值 2、函數封裝適合頁面有多個tab切換，需要註意的在獲取的li標簽和span標簽對象時，必須將對應di

js匿名函數封裝

dem ret type UNC function typeof clas fine export js匿名函數封裝 (function(root,factory){ typeof exports === ‘object‘ && typeof mo

通過js獲取class類名的函數封裝

clas ret -1 .class class urn getclass ++ 不同通過className獲取元素，不同的瀏覽器會有不同的支持情況，所以為了兼容各個瀏覽器在這裏，我寫了幾個函數獲取className的值 function byclass(classn){

react request.js 函數封裝

內容類型 () contain lencod encode error 刪除 accept nco 1.request.js 函數封裝 import { Toast } from ‘antd-mobile‘; import axios from ‘axios‘; imp

JS方法 - 字符串處理函數封裝匯總 (更新中...)

byte 計算 class 等於 text mat return color gets 一、計算一段字符串的字節長度字符串的charCodeAt()方法，可返回字符串固定位置的字符的Unicode編碼，這個返回值是0-65535之間的整數，如果值<=255時為

JS防抖與節流函數封裝

函數滾動 sta ner ott const eve else deb 防抖在監聽scroll事件的時候經常會用到防抖，當滾動到某一位置而觸發狀態，從而不會出現頻繁滾動持續觸發事件的情況防抖的事件處理機制僅觸發一次且必須是結束狀態下才會執行 function de

js變速動畫函數封裝回調函數及層級還有透明度

floor clear put 當前 false ets var return interval //點擊按鈕,改變寬度到達一個目標值,高度到達一個目標值 //獲取任意一個元素的任意一個屬性的當前的值---當前屬性的位置值 function getStyle(elem

js---08函數定時器

utf 返回值 right mouseout clear time play nts length <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" con

js的函數節流（throttle）

www img cnblogs window 綁定 cti ebo 上下文 0ms 什麽是函數節流？介紹前，先說下背景。在前端開發中，有時會為頁面綁定resize事件，或者為一個頁面元素綁定拖拽事件（其核心就是綁定mousemove），這種事件有一個特點，就是用戶不必特

關於js的函數

last 非ie isp 指定元素默認值判斷 lap 意義函數 1、獲取內容的兼容函數 /* * 一：獲取內容的兼容函數 * setText(obj, str) * 思路： * 1、首先判斷瀏覽器； * 2、如果是IE瀏覽器，就用innerText；

JS-構造函數模式代碼實戰和總結-極客

指向 spa ... 一個構造等等 nbsp log this 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8">

js學習——函數

訪問 fine 賦值函數提升調用函數 i++ 第一個 log 執行函數聲明 function funName(parameter){} 函數表達式，並把函數存儲在變量x中 //不用給函數名，後續並不能直接用給定的函數名調用 var x = function(a)

js節流函數中的參數傳遞

log 理解 tid jid ram arguments 其他事件區分以下內容，都是本人自己思考所得，不免存在很多問題，歡迎大家指正或者提供更好的解決方法。在開發中，遇到這樣一個問題：拍攝地點列表，用戶如果在短時間內多次點擊同一個地點時，將會添加多個同名地點。很顯

JS的函數

結果語言函數 alert 參數 show 實參 turn 簡單 JS中的函數使用。函數也叫做方法，方法也叫做函數。 //輸出一句話 function Show() { 　　alert("這是簡單的函數"); } Show(); //在哪裏使用就用Show();的方式調用

JS封閉函數、閉包、內置對象

cti on() url 需要取整用途分享環境商品一、變量作用域變量作用域指的是變量的作用範圍，javascript中的變量分為全局變量和局部變量 1、全局變量：在函數之外定義的變量，為整個頁面公用，函數的內部外部都可以訪問。 2、局部變量：在函數內部定義的變

php函數封裝

無限極分類打開圖片 png foreach rem parent cut isset save 這是一些自定義封裝的函數類，調用起來很方便，以後會有更多的封裝函數更新！ // 彈框跳轉function alert($msg,$url=‘‘){ echo "<sc

js匿名函數

png 完整所在 logs 部分 fun var 清晰 url路徑一、匿名函數的聲明和使用1.聲明一個匿名函數，直接賦值給某一個事件；2.使用匿名函數表達式。將匿名函數，賦值給一個變量。聲明：var func=function(){ }調用：func();註意：使用

第26天：js-$id函數、焦點事件

返回值效果 html 分享 code lan click 返回 return 一、函數return語句定義函數的返回值，在函數內部用return來設置返回值，一個函數只能有一個返回值。同時，終止代碼的執行。所有自定義函數默認沒有返回值return後面不要換行 var a=

JavaScript基礎一（js基礎函數與運算符）

+= js代碼二次匈牙利命名法下一步 undefined 相同區分大小寫第一個【使用js的三種方式】 1、在HTML標簽中，直接內嵌js（並不提倡使用） <button onclick=" alert(‘點就點‘)"> 點我啊</but

Eventutil函數封裝

edt on() 函數表示 turn pre att nts use var EventUtil={ addHandler:function(element,type,handler){ //添加事件 if(element.addEventL

JS——tab函數封裝

相關推薦