JavaScript插件制作-tab選項卡

阿新 • • 發佈：2018-10-13

++ doctype 500px clear win remove 制作 getattr hover

JavaScript插件制作練習-鼠標劃過選項卡切換圖片

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            body {
                background: # 
353131;
            }
            
            .warp {
                position: relative;
                top: 50px;
                left: 25%;
            }
            
            ul {
                list-style: none;
            }
            
            ul .warp-li {
                float: left;
                width: 100px;
                height: 40px;
                line 
-height: 40px;
                background: #000;
                opacity: .3;
                color: #fff;
                text-align: center;
            }
            
            ul .warp-li:hover {
                background: aquamarine;
                color: #000000;
                opopacity: 1;
            }
            
            ul::after {
                display: block;
                content:  
"";
                clear: both;
            }
            
            .box {
                position: absolute;
                left: 0;
                top: 40px;
                display: none;
            }
            
            .box img {
                width: 500px;
                height: 300px;
            }
            
            #show {
                display: block;
            }
            
            #on {
                background: aquamarine;
                color: #000;
                opopacity: 1;
            }
        </style>
    </head>

    <body>
        <div class="warp">
            <ul>
                <li class="warp-li" id="on">首頁</li>
                <li class="warp-li">動漫</li>
                <li class="warp-li">遊戲</li>
                <li class="warp-li">生活</li>
                <li class="warp-li">直播</li>
            </ul>
            <div class="box" id="show">
                <img src="img/1.jpg" />
            </div>
            <div class="box">
                <img src="img/18d8bc3eb13533fa3110518aadd3fd1f40345bf4.jpg" />
            </div>
            <div class="box">
                <img src="img/359b033b5bb5c9eab33999fed739b6003bf3b3e1.jpg" />
            </div>
            <div class="box">
                <img src="img/ce4a8e8065380cd7fd58a3eaa944ad3459828123.jpg.png" />
            </div>
            <div class="box">
                <img src="img/timg.jpg" />
            </div>

        </div>
        <script type="text/javascript">
            (function(window) {
                var maxTab = function(tabLen, showLen, tabLenId, showLenId) {
                    this.tabLen = tabLen;
                    this.showLen = showLen;
                    this.tabLenId = tabLenId; //選項卡id
                    this.showLenId = showLenId; //顯示區域id
                    this.show();//調用切換圖片的方法
                }
                maxTab.prototype = {
                    constructor: maxTab,
                    show: function() {
                        var _this = this; //這裏的this是指向maxTab的，function會建裏一個作用域所以要保留
                        var tabLen = document.getElementsByClassName(this.tabLen);
                        var showLen = document.getElementsByClassName(this.showLen);
                        var index = 0;
                        for(var i = 0; i < tabLen.length; i++) {
                            tabLen[i].setAttribute("index", i);
                            for(var j = 0; j < tabLen.length; j++) {
                                tabLen[i].onmouseover= function() {
                                    _this.reset(tabLen);
                                    _this.reset(showLen);
                                    this.id = _this.tabLenId;
                                    index = this.getAttribute("index");
                                    showLen[index].id = _this.showLenId;
                                }
                            }
                        }
                    },
                    //格式化id
                    reset: function(obj) {
                        for(var i = 0; i < obj.length; i++) {
                            obj[i].removeAttribute("id");
                        }
                    }
                }
                window.maxTab = maxTab;
            })(window)

            //插件調用
            var am = new maxTab("warp-li", "box", "on", "show");
        </script>
    </body>

</html>

++ doctype 500px clear win remove 制作 getattr hover JavaScript插件制作練習-鼠標劃過選項卡切換圖片 <!DOCTYPE html> <html> <head>

javascript插件制作學習-制作步驟

cti () function .proto dem prototype 插件開發 window his 原生JavaScript插件開發學習插件一般把它放到一個閉包用來與外部變量隔絕以防汙染全局變量。！(function(){ })() 插

jq制作二級選項卡

ngs mov hid .sh dcl his ont content rem $(‘.n-box-content‘).eq(0).show()$(‘.n-box-nav li‘).eq(0).children(‘a‘).addClass(‘active‘)$(‘.n-bo

jQuery——插件制作

註冊 body pre min doctype oct style 命名空間分享圖片 1、$.fn.extend：擴展 jQuery 元素集來提供新的方法（通常用來制作插件），使用時是$(‘選擇器‘).方法 2、$.extend：擴展jQuery對象本身，用來在jQuer

chrome插件制作

rip 資源文件點擊窗口靜態自帶應用 .... man chrome擴展程序就是一個web應用,要寫html代碼 chrome插件需要的文件：配置文件(manifest.json) 擴展圖標(icon.png ) 彈出窗口文件(popup.html) 其他靜

基於payjs的discuz支付插件制作

代碼下載文件夾 github 導出 blank block .com 目錄 bsp 今天對接discuz的微信支付，制作payjs的支付插件，順便記錄下。 mac下沒有tree命令，安裝一下：brew install tree ? payjs tree.├── disc

JavaScript特效二（tab選項卡、百度輸入法下拉列表）

一.tab選項卡 window.onload=function(){ //獲取三個按鈕 var aInput = document.getElement

javascript+div樣式的自定義tab選項卡

需求：進入頁面以div樣式的選項卡顯示，預設顯示第一個，滑鼠移上事件（也可以更換為滑鼠點選事件）進行切換選項卡 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.

javascript 實現tab選項卡

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab選項卡</title> <style>

自己在項目中寫的一個Jquery插件和Jquery tab 功能

分享 temp parameter turn sel url position pac tco 後臺查詢結果 PDFSearchResult實體類： [DataContract(Name = "PDFSearchResult")] public class P

JavaScript插件：快速選擇日期----jedate日歷插件

src 改變 text false ear func targe .com () jedate是一款輕量級JS庫，可快速選擇日期 http://www.sucaijiayuan.com/Js/DateTime/1371.html 使用方法：下載jedate ，解壓後不要

如何操作迅捷流程圖軟件制作流程圖

　　最近在網上下載了一個流程圖的軟件，對這款軟件不怎麽熟悉，那麽該如何操作這款軟件制作流程圖了，有些什麽快捷鍵沒有。想要制作流程圖就需要我們使用流程圖制作的軟件，接下來跟大家推薦一款特別好用的流程圖制作軟件，迅捷流程圖制作軟件，這款軟件不但體積小巧、功能強大的可用於繪制各種流程圖的專業繪圖軟，包括業務流程

用angular中的ng-repeat和ng-show來實現tab選項卡

new angular lis content padding col ora ack 顯示雖然我們可以用angular中的路由來做tab選項卡，但是那會讓我們建立很多的頁面來引入，或者建立 <script type="text/ng-template" id="n

自創簡易CSS Tab 選項卡

選中 dem top ive load fun .cn click 綜合前段時間我註冊了 w3c.run域名，打算做一個W3C相關技術在線試驗工具。沒錯，就是在線編寫html、css、js代碼然後在線運行，查看效果。在設計首頁時，我打算首頁提供三個代碼編輯器，介於界面大

Linux 主機與虛擬機網橋制作與網卡鏈路聚合

linux 基礎運維學習一、網橋制作1、主機的網橋制作刪除主機的/etc/sysconfig/network-scripts/ifcfg-enp0s25 在/etc/sysconfig/network-scripts/ifcfg-br0目錄下添加文件 #編輯主機的物理網卡文件 vim /etc

原生JS畫的tab選項卡

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

Tab選項卡自動切換效果js實現

one asc hidden abs 公告 turn get 實現 pla try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <

Tab選項卡延遲切換效果js實現

ext 0ms 分享規則 .get 內容 char out try try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t

一個頁面多個tab選項卡效果

結果菜鳥提升 ref -a 搜索引擎 flow .cn www. 新整理同一個頁面多個tab選項卡，由於不會自己些代碼，只能從網上找現成的來改。留著備用。共3部分，HTML、CSS、JS 暫時沒有演示地址和下載地址，以後會補上。 HTML部分 <!DOCTY

有了這款課件制作工具，輕松畫出正多邊形

了解一點獲取 www. ihe 箭頭地址 text obia 現代教學要求老師們掌握多媒體教學，這就要求掌握教學輔助工具，比如數學課件制作工具幾何畫板，我們可以用它畫出正多邊形，下面我們就以用幾何畫板繪制正五邊形為例，看看正多邊形的繪制方法。幾何畫板軟件免費獲取地址

JavaScript插件制作-tab選項卡

相關推薦