2

我试图通过单击导航按钮隐藏和显示 div 来将我的网站限制在一个页面上。我遇到的问题是，除非我按下第一个按钮，否则其他按钮将不起作用。如果我快速向两个导航按钮发送垃圾邮件，我还有另一个问题是同时显示两个 div。想要确保不会发生这种情况，以防观众点击按钮感到高兴。

我对 Javascript 还是很陌生，但对大部分基础知识都非常了解。任何帮助，将不胜感激。谢谢。

我正在使用的 HTML 部分：

    <!-- Beginning of navigationBar ----> 
<div id = "navigationBar">

    <!-- Beginning of logoBox ----> 
    <div id ="logoBox"> 
    </div>
    <!-- End of logoBox ---->

    <!-- Beginning of menuBar ---->
    <div id ="menuBar">
        <a href= "#" id="home">Home</a>
        <a href= "#" id="designers">Designers</a>
        <a href= "#" id="elements">Elements</a>
        <a href= "#" id= "sample">Your Sample Page</a>
        <a href= "#" id="contact">Contact Us</a>

    </div>
    <!-- End of menuBar ---->
</div>
<!-- End of navigationBar ---->

<!-- Beginning of mainContent ---->
<div id="mainContent">

    <!-- Begining of Intro Page --->
    <div id= "Intro"> Intro Page content goes here.
    </div>
    <!-- End of Intro Page --->



    <!-- Begining of Home Page --->
    <div id= "Home">Home page content goes here. 
    </div>
    <!-- End of Home Page --->



    <!-- Begining of Designers Page --->
    <div id= "Designers"> Designers page content goes here. 
    </div>
    <!-- End of Designers Page --->



    <!-- Begining of Elements Page --->
    <div id= "Elements"> Elements page content goes here.
    </div>
    <!-- End of Elements Page --->



    <!-- Begining of Sample Page --->
    <div id= "Sample">Sample page content goes here. 
    </div>
    <!-- End of Sample Page --->



    <!-- Begining of Contact Page --->
    <div id= "Contact">Contact page content goes here. 
    </div>
    <!-- End of Contact Page --->

已添加和使用的 CSS 位：

 #menuBar {
    padding:5px;

}
#menuBar > a{
    font-family:Arial, Helvetica, sans-serif;
    font-size:17px;
    border:#CCC 1px solid;
    background:#FFF;
    padding: 5px 10px;
    color: #999;
    margin-right: 5px;
    text-decoration: none;
    border-radius: 3px;
    -webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    -moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    -ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    -o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
    transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
#menuBar > a:hover{
    background: #000;
    color: #FFF;
}


#mainContent {
}
#socialMediaBar {
    background:#000;
    width: 100%;
    height: 30px;
}
#copyRight {
}

#Intro {
    display:none;
}

#Home {
    display:none;
}

#Designers {
    display:none;
}

#Elements {
    display:none;
}

#Sample {
    display:none;
}

我的javascript失败代码：

    window.onload=function(){
    $('#Intro').fadeIn("Slow")};


$("#home").click(function(){

    $('#Home').fadeIn("Slow");
    if($('#Home').is(':visible')){  
    $('#Designers, #Elements, #Sample, #Contact, #Intro').hide();}

$("#designers").click(function(){
    $('#Designers').fadeIn("Slow");
    if($('#Designers').is(':visible')){
    $('#Home, #Elements, #Sample, #Contact, #Intro').hide()};
    });
$("#elements").click(function(){
    $('#Elements').fadeIn("Slow");
    if($('#Elements').is(':visible')){
    $('#Designers, #Home, #Sample, #Contact, #Intro').hide()};
    });
$("#sample").click(function(){
    $('#Sample').fadeIn("Slow");
    if($('#Sample').is(':visible')){
    $('#Designers, #Home, #Elements, #Contact, #Intro').hide()};
    });
$("#contact").click(function(){
    $('#Contact').fadeIn("Slow");
    if($('#Contact').is(':visible')){
    $('#Designers, #Home, #Sample, #Elements, #Intro').hide()};
    });

    });
4

3 回答 3

2

你做错了，只是不依赖ids 菜单项，而是使用#menuBar事件处理程序的父元素并使用以下方法（id's 必须是唯一的）

<div id ="menuBar">
    <a href= "#" data-mainContent="home">Home</a>
    <a href= "#" data-mainContent="designers">Designers</a>
    <!-- more -->
</div>

<div id="mainContent">
    <div id= "intro">Intro content goes here.</div>
    <div id= "home">Home page content goes here.</div>
    <div id= "designers">Designer page content goes here.</div>
     <!-- more -->
</div>

然后在你的jQuery代码中试试这个（只有这个代码可以完成这项工作，不需要单独的处理程序）

$(function(){ // instead of window.onload
    $('#mainContent').children().hide();
    $('#intro').fadeIn("Slow");

    // Click event handler for all
    $('#menuBar').on('click', 'a', function(){
        $('#mainContent').children().hide();
        var el = $(this).attr('data-mainContent');
        $('#mainContent div#' + el).fadeIn('slow');
    });
});

此外，window.onload=function(){ //... }这里的使用是错误的。相反，您应该使用document.ready事件，但我在这里使用了简短形式

// You may Use this instead of window.onload=function(){ ... };
$(function(){
    // code goes here
});

工作示例。

更新：由于对相同id的 s 被使用两次感到困惑，但这不是因为id's 是因为 javascript 的区分大小写的性质，所以在同一页面上拥有Home两个不同的元素是有效的。因此，使用相同的（区分大小写，例如）id，可以做到这一点。homeid=Homeid=homeHome and home

于 2013-09-30T00:02:25.743 回答
1

首先摆脱嵌套的点击事件。在您的代码中，您在主页点击脚本下拥有所有点击事件。所以很明显，如果你不先点击主页，其他点击就不会运行。我最后一次搬到});了它所属的地方。

$("#home").click(function(){

    $('#Home').fadeIn("Slow");
    if($('#Home').is(':visible')){  
    $('#Designers, #Elements, #Sample, #Contact, #Intro').hide();}
});
$("#designers").click(function(){
    $('#Designers').fadeIn("Slow");
    if($('#Designers').is(':visible')){
    $('#Home, #Elements, #Sample, #Contact, #Intro').hide()};
    });
$("#elements").click(function(){
    $('#Elements').fadeIn("Slow");
    if($('#Elements').is(':visible')){
    $('#Designers, #Home, #Sample, #Contact, #Intro').hide()};
    });
$("#sample").click(function(){
    $('#Sample').fadeIn("Slow");
    if($('#Sample').is(':visible')){
    $('#Designers, #Home, #Elements, #Contact, #Intro').hide()};
    });
$("#contact").click(function(){
    $('#Contact').fadeIn("Slow");
    if($('#Contact').is(':visible')){
    $('#Designers, #Home, #Sample, #Elements, #Intro').hide()};
    });

比你可以使用回调函数来避免在前一个项目不隐藏之前显示 div。

所以

$("#contact").click(function(){
    $('#Contact').fadeIn("Slow", function(){
       $('#Designers, #Home, #Sample, #Elements, #Intro').hide();
    });
});

但是对于点击垃圾邮件问题 Id 这样做：

$("#contact").click(function(){
    $('#Designers, #Home, #Sample, #Elements, #Intro').hide();
    $('#Contact').fadeIn("Slow", function(){});
});
于 2013-09-29T23:52:07.827 回答
1

您一开始并没有在 CSS 中隐藏联系我们块，这就是为什么当您第一次加载页面时会看到联系我们内容的原因。

在这里检查一个固定的示例

$('#Intro').fadeIn("Slow");


$("#home").click(function () {
    $('#Designers, #Elements, #Sample, #Contact, #Intro').hide();
    $('#Home').fadeIn("Slow");
});
于 2013-09-29T23:56:00.533 回答