2

ナビゲーション ボタンをクリックして div を隠したり表示したりして、サイトを 1 ページに制限しようとしています。私が抱えている問題は、最初のボタンを押さない限り、他のボタンが機能しないことです。また、2 つのナビゲーション ボタンをすばやくスパムすると、2 つの 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

idメニュー項目の s に依存しないでください。代わりに#menuBar、イベント ハンドラーに親要素を使用し、次のアプローチを使用します (idは一意である必要があります)。

<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 が 2 回使用されていることについて混乱がありましたが、それはids があったためではなく、javascript の大文字と小文字が区別される性質のためではなく、2 つの異なる要素に対して同じページにとがあることは有効です。したがって、同じ (大文字と小文字を区別する) ID を使用して、これを行うことができます。Homehomeid=Homeid=homeHome and home

于 2013-09-30T00:02:25.743 に答える
1

最初に CSS の contact us ブロックを隠していないため、最初にページをロードしたときに contact us コンテンツが表示されます。

ここで修正された例を確認してください

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


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

まず、ネストされたクリック イベントを取り除きます。コードでは、ホーム クリック スクリプトの下にすべてのクリック イベントがあります。したがって、最初にホームをクリックしないと、明らかに他のクリックは実行されません。});私はそれが属する場所にver last closeを移動しました。

$("#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 に答える