現在選択されているかどうかに基づいて要素を条件付きで切り替えるには

Question

このサイトとWeb開発の一般的な新機能ですが、私は少しの助けが必要なプロジェクトに取り組んでいます。私はまだこれに新しいですので、私と一緒に抱いてください私は私のコードがたるんで、おそらく非効率であることを理解してください。

ページを下にスクロールすると表示されている固定ヘッダーに取り組んでいます。さらに、リンクをクリックすると、そのリンクを強調表示してからスクロール操作でページ上の特定の場所に移動します。 1をクリックすると強調表示され、他はグレー表示になります。

私はこれを行うためにユニークな形を使用しているので、私は単に画像を使用しました。私はあなたが提案を持っているなら、それは非常に高く評価されるだろうので、より良いことを知らない。しかし、これは皆さんにとって私の質問のポイントではありません。私はすでにクリックスクロール操作をどのように動作させるかを考え出していますが、ここではユーザーが選択した要素を強調表示しています。

画像を条件付きでトグルする方法を知りたいですか？たとえば、下のjsfiddleリンクを見ると、ある要素をクリックすると他の要素がすべて切り替わるが、一部は淡色表示のままで、一部はハイライト表示されることがわかります。

私はあなたがアクションでそれを見る場合は、その下のデモへのリンクを見つけてください、私のジレンマを理解すると思う：

JSFiddle Demo

ありがとうございました！

[id^="section"] { 
    position: absolute; 
    display: inline; 
} 

[id^="section"] img:last-child { 
    display: none; 
} 

[id^="section"].not-active img:last-child { 
    display: block; 
} 

[id^="section"].not-active img:first-child { 
    display: none; 
} 

ああと大きな変化、アクティブ/：

$(document).ready(function() { 
    $("#section1").click(function() { 
     $("#section2").toggle(); 
     $("#section3").toggle(); 
     $("#section4").toggle(); 
     $("#section5").toggle(); 
     }); 
    }); 

    $(document).ready(function() { 
    $("#section2").click(function() { 
     $("#section1").toggle(); 
     $("#section3").toggle(); 
     $("#section4").toggle(); 
     $("#section5").toggle(); 
    }); 
    }); 

    $(document).ready(function() { 
    $("#section3").click(function() { 
     $("#section2").toggle(); 
     $("#section1").toggle(); 
     $("#section4").toggle(); 
     $("#section5").toggle(); 
    }); 
    }); 

    $(document).ready(function() { 
    $("#section4").click(function() { 
     $("#section2").toggle(); 
     $("#section3").toggle(); 
     $("#section1").toggle(); 
     $("#section5").toggle(); 
    }); 
    }); 

    $(document).ready(function() { 
    $("#section5").click(function() { 
     $("#section2").toggle(); 
     $("#section3").toggle(); 
     $("#section4").toggle(); 
     $("#section1").toggle(); 
    }); 
    }); 

    $(document).ready(function() { 
    $("#section1text").click(function() { 
     $("#section2").toggle(); 
     $("#section3").toggle(); 
     $("#section4").toggle(); 
     $("#section5").toggle(); 
    }); 
    }); 

    $(document).ready(function() { 
    $("#section2text").click(function() { 
     $("#section1").toggle(); 
     $("#section3").toggle(); 
     $("#section4").toggle(); 
     $("#section5").toggle(); 
    }); 
    }); 

    $(document).ready(function() { 
    $("#section3text").click(function() { 
     $("#section2").toggle(); 
     $("#section1").toggle(); 
     $("#section4").toggle(); 
     $("#section5").toggle(); 
    }); 
    }); 

    $(document).ready(function() { 
    $("#section4text").click(function() { 
     $("#section2").toggle(); 
     $("#section3").toggle(); 
     $("#section1").toggle(); 
     $("#section5").toggle(); 
    }); 
    }); 

    $(document).ready(function() { 
    $("#section5text").click(function() { 
     $("#section2").toggle(); 
     $("#section3").toggle(); 
     $("#section4").toggle(); 
     $("#section1").toggle(); 
    }); 
    }); 

Answer 1

だからあなたはこのjQueryの

$(document).ready(function() { 
    $('div[id^="section"]').on('click', function() { 
    $('div[id^="section"]').addClass('not-active'); 
    $(this).removeClass('not-active'); 
    }); 
}); 

とCSSの中で最も重要な変更ですべてがとても似ていることを行うことができますマンリーアクティブな画像がすべて同じdivにあり、first-とlast-という子をCSSでトリガーします。何かが不明である場合は、単に一つのイベントリスナでアクティブなクラスを切り替えると、すべてのそのコードの重複を防ぐことができるように

だけ

$(document).ready(function() { 
 
    $('div[id^="section"]').on('click', function() { 
 
    $('div[id^="section"]').addClass('not-active'); 
 
    \t $(this).removeClass('not-active'); 
 
    }); 
 
});

body { 
 
    margin: 0; 
 
    width: 1596px; 
 
} 
 

 
section { 
 
    height: ; 
 
} 
 

 
.stickybanner { 
 
    height: 71px; 
 
    padding-bottom: 20px 
 
} 
 

 
.fixed { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 

 
#section1 { 
 
    padding-bottom: 125px; 
 
} 
 

 
.bannerbg { 
 
    z-index: -1; 
 
    position: absolute; 
 
    left: 0px; 
 
    right: 0px; 
 
} 
 

 
#banner { 
 
    position: absolute; 
 
} 
 

 
[id^="section"] { 
 
    position: absolute; 
 
    display: inline; 
 
} 
 

 
[id^="section"] img:last-child { 
 
    display: none; 
 
} 
 

 
[id^="section"].not-active img:last-child { 
 
    display: block; 
 
} 
 

 
[id^="section"].not-active img:first-child { 
 
    display: none; 
 
} 
 

 
#section1 { 
 
    left: 26px; 
 
} 
 

 
#section2 { 
 
    left: 325px; 
 
} 
 

 
#section3 { 
 
    left: 624px; 
 
} 
 

 
#section4 { 
 
    left: 923px; 
 
} 
 

 
#section5 { 
 
    left: 1222px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 

 
    <div class="stickybanner"> 
 
     <div class="bannerbg"><img src="http://imgur.com/UaZtFBu.png"></div> 
 

 
     <div id="section1"> 
 
     <img src="http://imgur.com/A3hv0f3.png"> 
 
     <img src="http://imgur.com/iQv7yhd.png"> 
 
     </div> 
 
     <div id="section2"> 
 
     <img src="http://imgur.com/Ld1TntV.png"> 
 
     <img src="http://imgur.com/oziGN60.png"> 
 
     </div> 
 
     <div id="section3"> 
 
     <img src="http://imgur.com/zpViBoy.png"> 
 
     <img src="http://imgur.com/f5wSB6N.png"> 
 
     </div> 
 
     <div id="section4"> 
 
     <img src="http://imgur.com/hgt5u84.png"> 
 
     <img src="http://imgur.com/Skhrull.png"> 
 
     </div> 
 
     <div id="section5"> 
 
     <img src="http://imgur.com/iOThUy8.png"> 
 
     <img src="http://imgur.com/lLRbfvT.png"> 
 
     </div> 
 

 

 
    </div> 
 

 
    </section>