いつも大変お世話になっております。
以前、こちらで問い合わせさせていただいた内容は万事解決したのですが
次はさらに複雑なところで困っています。
カテゴリーが色の種類だけでなく、人気順など、特殊なカテゴリーおよび、ページなども加えて一つのおページ内で変更をさせたいと考えています。(できれば、ページ変更はなく、JavaScriptとjQueryでそれを済ませたいと考えています。。)
ゴールは下記です。赤枠を押すと、透明ピンクないのコンテンツが変わるという仕組みです。
同時に、左サイドバーのカテゴリーを押すと、ジャンボトロンも変わるやり方もわかれば、教えていただければ幸いです。
前回、ご教授いただいたコードを生かしたのですが、うまくいきません。。
JavaScript
1 $(function(){ 2 $(".nav-index li").on("click" , function(){ 3 var num = $(".nav-index li").index(this); 4 $(".contents").fadeOut(); 5 $(".contents").eq(num).fadeIn(); 6 $(".nav-index li").removeClass('select'); 7 $(".nav-index li").eq(num).addClass('select'); 8 }); 9 }); 10 11 /* page-toggle */ 12 $(function(){ 13 $(".page-nav-index li").on("click" , function(){ 14 var num = $(".page-nav-index li").index(this); 15 $(".page-contents").fadeOut(); 16 $(".page-contents").eq(num).fadeIn(); 17 $(".page-nav-index li").removeClass('select'); 18 $(".page-nav-index li").eq(num).addClass('select'); 19 }); 20 }); 21 22 /* main-toggle */ 23 24 $(function(){ 25 $(".main-nav-index li").on("click" , function(){ 26 var num = $(".main-nav-index li").index(this); 27 $(".main-contents").fadeOut(); 28 $(".main-contents").eq(num).fadeIn(); 29 $(".main-nav-index li").removeClass('select'); 30 $(".main-nav-index li").eq(num).addClass('select'); 31 }); 32 }); 33
HTML
1 2 <!-- nav-index --> 3 <aside class="discover-side"> 4 <h2>Color</h2> 5 <ul class="nav-index"> 6 <li>blue</li> 7 <li>red</li> 8 <li>green</li> 9 </ul> 10 </aside> 11 12 <!-- main --> 13 <section class="discover-main"> 14 <nav class="container global-nav"> 15 <ul class="nav main-nav-index"> 16 <li class="select">POPULAR</li> 17 <li>PRICE</li> 18 <li>NEW</li> 19 <li>ARRIVING</li> 20 </ul> 21 </nav> 22 23 <!-- page --> 24 <nav> 25 <ul class="pager page-nav-index"> 26 <li><a href="#">Previous</a></li> 27 <li><a href="#">Next</a></li> 28 </ul> 29 </nav> 30 31
コンテンツは
複雑ではありますが、なにとぞ、お知恵のほど拝借できればと存じます。
回答1件
あなたの回答
tips
プレビュー