尋找更有效的方式來寫這個jQuery的菜單

我對jquery很新，所以我一直在通過w3schools.com上的一些例子，以獲得一些想法如何編寫更好的代碼。出於好奇之外，我想出了這個非常簡單的菜單，它有四個div，一個名爲#main-slide的主分區，其中包含三個鏈接，分別指向三個子幻燈片sub-slide-one,sub-slide-two,sub-slide-three。順便說一句，其實這些都沒有滑入或滑出我只是出於任何原因命名他們的方式。尋找更有效的方式來寫這個jQuery的菜單

下面是HTML：

<body> 


    <div id="main-slide"> 

    <a class="Subone" href="#">SUB ONE</a> 
    <a class="Subtwo" href="#">SUB TWO</a> 
    <a class="Subthree" href="#">SUB THREE</a> 

    </div> 


    <div id="sub-slide-one"> 

    <h1>SUB ONE</h1> 

    <a class="BackMain1" href="#">BACK TO MAIN</a> 

    </div> 

    <div id="sub-slide-two"> 

    <h1>SUB TWO</h1> 

    <a class="BackMain2" href="#">BACK TO MAIN</a> 

    </div> 



    <div id="sub-slide-three"> 

    <h1>SUB THREE</h1> 

    <a class="BackMain3" href="#">BACK TO MAIN</a> 

    </div> 

</body>

這裏是CSS：

body { 
    background-color: antiquewhite; 
} 

h1 { 
    text-align: center; 
    padding-top: 30px; 
} 

a { 
    text-decoration: none; 
    color: #fff; 
    font-family: arial; 
    font-weight: bold; 
    text-align: center; 
    display: block; 
    padding-top: 30px; 
} 

#sub-slide-one, 
#sub-slide-two, 
#sub-slide-three { 
    display: none; 
    width: 90%; 
    height: 600px; 
    position: relative; 
    margin: 0 auto; 
    margin-top: 30px; 
} 

#main-slide { 
    width: 90%; 
    height: 600px; 
    position: relative; 
    margin: 0 auto; 
    margin-top: 30px; 
    background-color: aliceblue; 
    display: block; 
} 

#sub-slide-one { 
    background-color: cadetblue; 
} 

#sub-slide-two { 
    background-color: crimson; 
} 

#sub-slide-three { 
    background-color: cornflowerblue; 
} 

.Subone, 
.Subtwo, 
.Subthree { 
    width: 100%; 
    height: 200px; 
    display: block; 
} 

.Subone { 
    background-color: dodgerblue; 
} 

.Subtwo { 
    background-color: darkkhaki; 
} 

.Subthree { 
    background-color: darkgoldenrod 
}

對於JavaScript的每一個環節上有一個淡入/淡出點擊功能。例如，單擊Subone時，#main-slide淡出，sub-slide-one淡入。每個子幻燈片都包含一個鏈接回主幻燈片的背部鏈接。這是我最終遇到問題的地方，菜單按預期工作，儘管當我點擊SubThree鏈接時，無論出於何種原因，它都跳到頂端。

但爲了得到反向鏈接淡入淡出div正確我不得不創建每個反向鏈接與一個單獨的類和單獨的函數來獲得所需的結果。

這裏是Jquery的：

$(document).ready(function() { 


    $(".Subone").click(function() { 
    $("#main-slide").fadeOut(1200); 
    $("#sub-slide-one").delay(1200).fadeIn(1200); 

    }); 

    $(".Subtwo").click(function() { 
    $("#main-slide").fadeOut(1200); 
    $("#sub-slide-two").delay(1200).fadeIn(1200); 

    }); 

    $(".Subthree").click(function() { 
    $("#main-slide").fadeOut(1200); 
    $("#sub-slide-three").delay(1200).fadeIn(1200); 

    }); 


    $(".BackMain1").click(function() { 
    $("#sub-slide-one").fadeOut(1200); 
    $("#main-slide").delay(1200).fadeIn(1200); 

    }); 

    $(".BackMain2").click(function() { 
    $("#sub-slide-two").fadeOut(1200); 
    $("#main-slide").delay(1200).fadeIn(1200); 

    }); 

    $(".BackMain3").click(function() { 
    $("#sub-slide-three").fadeOut(1200); 
    $("#main-slide").delay(1200).fadeIn(1200); 

    }); 


});

我不得不相信有一個更有效的方式做到這一點，但我似乎無法弄清楚如何。這裏有一個鏈接JSfiddle看到這在行動https://jsfiddle.net/Dylancougar/k9f53wpp/

來源

2016-09-10 Dylancougar

請使用內聯代碼formattin而不是粗體格式化變量和代碼。 – linusg

爲父菜單定義一個公共類，也作爲父母和子女菜單之間的關係使用它的ID。得到單擊ID，並用它來決定哪個子菜單中有反應：

<div id="main-slide"> 

    <a class="topmenu" id="1" href="#">SUB ONE</a> 
    <a class="topmenu" id="2" href="#">SUB TWO</a> 
    <a class="topmenu" id="3" href="#">SUB THREE</a> 

    </div> 


    <div id="sub-slide-1"> 

    <h1>SUB ONE</h1> 

    <a class="Back" id="1" href="#">BACK TO MAIN</a> 

    </div>

的jQuery：

$(".topmenu").click(function() { 
    var id=$(this).attr("id"); 
    $("#main-slide").fadeOut(1200); 
    $("#sub-slide-"+id).delay(1200).fadeIn(1200); 
    });

，並使用同樣的方法關閉適當的子菜單。

$(".back").click(function() { 
    var id=$(this).attr("id"); 
    $("#sub-slide-"+id).fadeOut(1200); 
    $("#main-slide").delay(1200).fadeIn(1200); 
    });

請考慮不建議在一個頁面內重複和ID。因此您可以定義更復雜的ID打開1或關閉1並在計算之前刪除多餘的單詞。

var id=$(this).attr("id").replace("open","");

來源

2016-09-10 20:04:57

你可以達到你想要什麼樣的this。所以你將不得不改變你的HTML結構，爲每個相同的元素添加一個公共類併爲它們添加一個id。它會稍微改變你的CSS。

$(function() { 
    $(".sub").on('click', function (e) { 
    let number = $(this).attr('id').split('-')[1]; 

    $("#main-slide").fadeOut(1200); 
    $("#sub-slide-" + number).delay(1200).fadeIn(1200); 

    e.preventDefault(); 
    }); 

    $(".backMain").on('click', function (e) { 
    let number = $(this).attr('id').split('-')[1]; 

    $("#sub-slide-" + number).fadeOut(1200); 
    $("#main-slide").delay(1200).fadeIn(1200); 

    e.preventDefault(); 
    }); 
});

添加e.preventDefault（）會避免去一個鏈接，當點擊到頂部。這與Ali Sheikhpour給你的解決方案非常相似。通過這種方式很容易保持和非常容易理解（不重複）。

來源

2016-09-10 20:25:33 TyrionGraphiste

尋找更有效的方式來寫這個jQuery的菜單

回答

相關問題