js學習總結----經典小案例之選項卡

阿新 • • 發佈：2017-06-20

scrip ges div 視頻內容 mil line 學習總結 images ul li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body,div,ul,li{
            margin:0;
            padding: 0;
            font-family: Arial;
            font-size:12px;
        }
        ul li{
            list 
-style:none;
        }
        #tab{
            margin:10px auto 0;
            width:500px;

        }
        #tab ul{
            position: relative;
            top:1px;
        }
        #tab li{
            float:left;
            width:100px;
            height:30px;
            line-height: 30px;
            text 
-align:center;
            border:1px solid #ddd;
            margin-right:10px;
            cursor:pointer;
        }
        #tab li.select{
            border-bottom:none;
            background:-webkit-linear-gradient(top left,#cc0000,#00b3ee,#ffff00);
        }
        #tab div{
            display:none;
            clear:both;
            height:100px;
            line 
-height:100px;
            text-align:center;
            border:1px solid #ddd;
        }
        #tab div.select{
            display:block;
        }
    </style>
</head>
<body>
    <div id=‘tab‘>
        <ul>
            <li class=‘select‘>視頻</li>
            <li>綜藝</li>
            <li>秒拍</li>
        </ul>
        <div class=‘select‘>視頻內容</div>
        <div>綜藝內容</div>
        <div>秒拍內容</div>
    </div>
    <script type=‘text/javascript‘>
        /*
            選項卡的思路:
            1、鼠標滑到某一個li上面，先讓所有的li和div都沒有select樣式，再讓當前的有這個select樣式
            2、要操作誰就先獲取誰
            3、制定一個功能方法，實現我們的需求
            4、給我們的li綁定鼠標移上去的事件

        */
        var oTab = document.getElementById(‘tab‘);
        var oLis = oTab.getElementsByTagName(‘li‘);
        var oDivs = oTab.getElementsByTagName(‘div‘)
        //nIndex是我們定義的形參，代表當前被選中的元素的索引
        function tabChange(nIndex){
            for(var i = 0;i<oLis.length;i++){
                oLis[i].className = "";
                oDivs[i].className = "";
            }
            oLis[nIndex].className = "select";
            oDivs[nIndex].className = "select";
        }
        //js加載完成後(for循環也完成)，我們才會手動觸發onmouseover事件 ，這裏有一個閉包的問題
        for(var i = 0;i<oLis.length;i++){
            oLis[i].index = i//在每一個循環的時候，把每一個li 的索引定義在自己的自定義屬性index上
            oLis[i].onmouseover = function(){
                tabChange(this.index)
            }
        }
    </script>
</body>
</html>

簡化版本：

技術分享

js學習總結----經典小案例之選項卡

scrip ges div 視頻內容 mil line 學習總結 images ul li <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

小白之選項卡

margin tro ali borde == wid his ddc http 小白之選項卡 html： <div class="tab"> <div class="tab_menu"> <ul>

微信小程式之選項卡

從事前端的同學們一定不會對選項卡陌生，不管是自己原生寫的，還是各個UI框架裡帶的，我想大家都使用過很多選項卡，對選項卡的原理也足夠清楚了，下面我們來在微信小程式裡實現選項卡的功能。微信小程式裡沒有自帶選項卡元件，但是卻帶有swiper元件，所以，我們便利用s

js學習總結----小案例之跑馬燈

htm function 微博 border ron == 內容 rip gree 具體代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

js學習總結----動畫之在指定時間內實現單方向勻速運動

mar eight 思想 offset line ack css += hang 具體代碼如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g

js學習總結----jQuery之動畫 ajax 事件

win 學習總結 top 上一個淡出 set 返回 ati var <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

js學習總結----crm客戶管理系統之node編寫API接口

準備獲取 ring length urn 使用 col asc ati 具體API代碼如下 var http = require(‘http‘), url = require(‘url‘), fs = require(‘fs‘); var server

js學習總結----crm客戶管理系統之前端頁面開發及數據渲染

bmi length element || useradd attribute xxx tle exe 具體代碼如下: index.html <!DOCTYPE html> <html lang="en"> <head> <

js學習總結----webapp之使用less構建響應式布局

構建 subst 社區控制 new nbsp post .class timeout 本章主要是對移動端的一些知識點的運用，模仿騰訊看比賽的移動端做的。具體代碼如下 index.html <!DOCTYPE html> <html lang="en"&

Java Web學習(14)：階段專案小案例之實現使用者登入(不使用資料庫)

實現使用者登入小例子的專案描述：使用者名稱admin，密碼123456，登入成功使用伺服器內部轉發到login_success.jsp頁面，並且提示登入成功的用戶名，如

Vue小案例之商品管理------學習過濾器使用過濾器處理日期的格式

microsoft borde btn 語法添加 var clear ejs format 代碼學習過濾器過濾器介紹：過濾模型數據，在數據顯示前做預處理操作；內置過濾器：在1.x中，Vue提供了內置過濾器，但是在2.x中已經完全廢除；解決辦法：

js學習總結----Date和應用

color spa += form format second fun ext 效果獲取當前自己電腦的時間：不能做重要的用途，例如淘寶秒殺　　var time = new Date(); // 時間格式數據（對象數據類型）　　下面是格式化時間的方法　 <!D

JS實例之選項卡效果，實現點擊對應的顯示效果

http body auto 100% itl elements lis style char 1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

js學習總結----函數

索引知識結束開始總結小括號接收 ons 設定一、函數基本知識 1、function:函數->具備某個功能的一個方法。方法本身是沒有什麽意義的，只有執行這個方法實現了對應的功能才有自己的價值。 2、函數由兩部分組成:創建一個函數、執行這個函數　 fun

js學習總結----深入擴展原型鏈模式常用的六種繼承方式

模式 temp 枚舉又是 reat 缺點解決 his obj 一、可枚舉和不可枚舉 for in 循環在遍歷的時候，默認的話可以把自己私有的和它所屬類原型上的擴展的屬性和方法都可以遍歷到，但是一般情況下，我們遍歷一個對象只需要遍歷私有的即可，我們可以使用以下的判斷進行處

js學習總結----函數的三種角色

也有 {} pro -- 之間 fin bsp fine ons 註意：Function.prototype是函數數據類型的值，但是相關操作和之前的一模一樣->Empty/anonymous 函數本身也會有一些自己的屬性： length ：形參的個數 nam

js學習總結----call方法深入

pro 是我學習總結 type 模擬 eva -- tex span 　　　　 var obj = {name:"張三"} function fn(){ console.log(this) } fn

js學習總結----call和apply和bind的區別

style 效果兩個是我 define 學習處理 blog call() apply和call的方法是一模一樣的，都是用來改變方法的this關鍵字，並且把方法執行:而且在嚴格模式和非嚴格模式下對於第一個參數是null/undefined這種情況的規律是一樣的； bin

js學習總結----正則的作用

prot ole -- ons 一個創建區別 regexp 我們一、正則:就是一個規則，用來處理字符串的一個規則（正則就是用來處理字符串的）　　處理: 　　1）、匹配判斷一個字符串是否符合我們制定的規則->test　 reg.test(str)　　　

js學習總結----設置元素的樣式值setcss

默認 div function ret ttr lte fun wid ott 在JS給元素設置樣式屬性值，我們只能通過curEle.style[attr] = value 這種方式給元素設置行內樣式下面封裝一個給當前元素的某一個樣式屬性設置值的方法（增加在行內樣式上的）

js學習總結----經典小案例之選項卡

相關推薦