tab表單三種寫法及問題

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.8.0.js"></script>
    <style>
        .div-tab-head{
            width: 104px;
            height: 32px;
            float: left;
        }
        .div-tab-head>div{
            width: 100px;
            height: 30px;
            border: 1px solid darkblue;
        }
        .box{
            height: 800px;
            width: 1200px;
            float: left;
        }
        iframe{
            border: none;
            height: 800px;
            width: 1200px;
            display: none;
        }
        .show{
            display: block;
        }
        .Odiv{
            background-color: #2aabd2;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <iframe class="show" src="https://www.baidu.com/"></iframe>
        <iframe src="http://www.w3school.com.cn/"></iframe>
        <iframe src="http://www.runoob.com/jquery/jquery-tutorial.html"></iframe>
    </div>
    <div class="div-tab-head" id="div-tab-head">
        <div class="Odiv">百度</div>
        <div>W3c</div>
        <div>菜鳥</div>
    </div>
</body>
<!--jquery寫法-->
<!--此方法獲取子級元素時在webStorm會出現警告-->
<!--<script>-->
    <!--$("#div-tab-head div").click(function() {-->
        <!--var i = $(this).index();//下標第一種寫法-->
        <!--//var i = $('tit').index(this);//下標第二種寫法-->
        <!--$(this).addClass('Odiv').siblings().removeClass('Odiv');-->
        <!--$('#box iframe').eq(i).show().siblings().hide();-->
    <!--});-->
<!--</script>-->
<!--jquery find遍歷子級元素-->
<!--顯示正常-->
<!--<script>-->
    <!--$("#div-tab-head").find('div').click(function(){-->
        <!--var i = $(this).index();-->
        <!--$(this).addClass('Odiv').siblings().removeClass('Odiv');-->
        <!--$('#box').find('iframe').eq(i).show().siblings().hide();-->
    <!--})-->
<!--</script>-->

<!--javascript寫法-->
<script>
    var Box = document.getElementById("box");
    var Box_list = box.getElementsByTagName("iframe");
    var OTab_head = document.getElementById("div-tab-head");
    var Odiv = OTab_head.getElementsByTagName("div");
//    alert(Odiv.length);
    for(i=0,len = Odiv.length; i<len; i++){
        Odiv[i].index = i;
        Odiv[i].onclick = function(){
            for(var n=0; n<len; n++){
                Box_list[n].className="";
                Odiv[n].className="";
            }
            Box_list[this.index].className="show";
            this.className="Odiv";
        }
    }
</script>
</html>

tab表單三種寫法及問題

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <sc

詳談表單重複提交的三種情況及解決方法

第一種情況：提交完表單以後，不做其他操作，直接重新整理頁面，表單會提交多次。- 在servlet中寫一句輸出，用來判斷是否提交多次?12System.out.println("已經插入");request.getRequestDispatcher("/login_succes

C#單例模式的三種寫法

lock help static gin -a ont singleton pub ria 第一種…… public class Singleton { private static Singleton _instance = null;

HTML引入CSS樣式三種方法及優先級 CSS樣式的寫法

分開通過 str 相同 gif 標記 sof 偽類 cnblogs HTML引入CSS樣式三種方法及優先級：方法 css的樣式引用由3種方式。分別為行內樣式、內部樣式（嵌入式）和外部樣式；行內樣式：在對象的標記內使用對象的s

單例模式的三種寫法和優缺點

兩種 system 一個 obj cti sin clr 效果 returns 1 using System; 2 using System.Collections.Generic; 3 4 namespace ConsoleApp1 5 { 6 c

單例模式的三種寫法 c#

ins obj spa sta 模式 return 問題 private 簡單 //第一種最簡單，但沒有考慮線程安全，在多線程時可能會出問題，不過俺從沒看過出錯的現象 public class Singleton { private static Singleto

mysq表的三種關係,資料的增刪改以及單表多表查詢

一丶三種關係分析步驟： #1、先站在左表的角度去找是否左表的多條記錄可以對應右表的一條記錄，如果是，則證明左表的一個欄位foreign key 右表一個欄位（通常是id） #2、再站在右表的角度去找是否右表的多條記錄可以對應左表的一條記錄，如果是，則證明右表的一個欄位

[BZOJ1010][HNOI2008]玩具裝箱toy[斜率優化+決策單調性三種寫法]

\[ f\left[ i \right] =\min \left\{ f\left[ j \right] +\left( i-j-1+pre\left[ i \right] -pre\left[ j \right] -l \right) ^2 \right\} \\ \text{令}g\left( i \ri

java設計模式之單例模式（幾種寫法及比較）

概念：　　java中單例模式是一種常見的設計模式，單例模式的寫法有好幾種，這裡主要介紹三種：懶漢式單例、餓漢式單例、登記式單例。　　單例模式有以下特點：　　1、單例類只能有一個例項。　　2、單例類必須自己建立自己的唯一例項。　　3、單例類必須給所有其他物件提供這一例項。　

單例模式的6種寫法及不同（精華版）

1、懶漢模式。執行緒不安全，但可以延遲【不推薦，不使用】 <span style="font-size:12px;">public class Singleton1 { private static Singleton1 singleton1=nul

單例模式常用三種寫法

餓漢式(空間換時間) public class Singleton { //加static讓getInstance方法呼叫 private static Singleton sin

Java設計的單例模式（三種寫法）

最近在一些部落格上面看到的單例模式，無一例外都是餓漢和懶漢，這兩個確實是單例模式，但是各有自己的弊端先上程式碼吧 //餓漢式 class ClassA{ private static final ClassA instance = new ClassA(); pub

單例模式的三種實現及區別

單例模式的三種實現方法 in Java 單例模式，是GoF23個設計模式中比較常見的一種，主要目的是讓某個類只存在一個例項。本人將列舉出3種單例模式的Java實現。方法一不能帶參的建構函式本人使用的idea，在建立一個類的時候，會有一個Singl

js 對表單的一些驗證及正則匹配

攻擊 update 匹配規則 asc htm out gin lease public 利用的是jq的validate.js 詳見菜鳥教程http://www.runoob.com/jquery/jquery-plugin-validate.html 以下是我測試的幾個文件

angularjs 的controller的三種寫法

rep tail not ole -m sco details sta 引用 AngularJS 的controller其實就是一個方法，它有三種寫法：第一種： [javascript] view plain copy <pre name="code"

表單正則驗證及文件上傳驗證

特殊 email地址常用 clas isset move 一個包含是否表單正則驗證主要是用來對表單提交信息的過濾，防止sql註入（比如登錄界面），上傳的文件也需要進行文件名後綴和大小進行驗證，下面是一個簡單的表單驗證 1 header("Content-type

轉:Tomcat內存溢出的三種情況及解決辦法分析

個數配置 param 釋放 blank pri 開始 clas ive Tomcat內存溢出的原因　　在生產環境中tomcat內存設置不好很容易出現內存溢出。造成內存溢出是不一樣的，當然處理方式也不一樣。　　這裏根據平時遇到的情況和相關資料進行一個總結。常見的一般會有下面

js在HTML中的三種寫法

set 定位 script 內容 jpg 添加彈窗引用 brush 1.內聯樣式內聯樣式分為兩種，一是直接寫入元素的標簽內部 <html> <title>js樣式內聯寫法</title> <meta http-equiv

mysql分表的三種方法

word 完整似的我不 syntax ngs 會有檢索數量先說一下為什麽要分表當一張的數據達到幾百萬時，你查詢一次所花的時間會變多，如果有聯合查詢的話，我想有可能會死在那兒了。分表的目的就在於此，減小數據庫的負擔，縮短查詢時間。根據個人經驗，mysql執行一個sq

JavaScript Html頁面加載完成三種寫法

window blue log script onload document htm scrip javascrip //一、Html頁面加載完成的JS寫法 //1. $(function () { alert("窗體Html頁面加載完成方法一"); }); /

tab表單三種寫法及問題

相關推薦