寻找更有效的方式来写这个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的菜单

回答

相关问题