CSSの2つの要素を1ページに作成するメニューを作成する

Question

スライダでクリックイベントの背景を変更する必要があります。私は「のような」イメージが、私のコードは動作しないものが必要です

$(document).ready(function() { 
 
    $("nav a").click(function() { 
 
    $("nav a").removeClass("active"); 
 
    $(this).addClass("active"); 
 
    }); 
 
}); 
 
$(document).ready(function() { 
 
    $("#slider a").click(function() { 
 
    $("#slider a").removeClass("active"); 
 
    $(this).addClass("active"); 
 
    }); 
 
});

#menu { 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    height: 39, 064px; 
 
    background: skyblue; 
 
    border-radius: 10px 10px 0px 0px; 
 
    -moz-border-radius: 10px 10px 0px 0px; 
 
    -webkit-border-radius: 10px 10px 0px 0px; 
 
    border: 0px solid #474747; 
 
    -webkit-box-shadow: -4px -8px 6px -5px rgba(0, 0, 0, 1); 
 
    -moz-box-shadow: -4px -8px 6px -5px rgba(0, 0, 0, 1)); 
 
    box-shadow: -4px -8px 6px -5px rgba(0, 0, 0, 1); 
 
} 
 
/*CSS menu label kiri*/ 
 

 
#tbl-menu { 
 
    display: none; 
 
} 
 
#menu label { 
 
    display: none; 
 
    width: 40px; 
 
    height: 40px; 
 
    border-right: 1px solid red; 
 
} 
 
#menu label:hover { 
 
    cursor: pointer; 
 
    background: yellow; 
 
} 
 
a { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
} 
 
.tombol { 
 
    margin: 0; 
 
    list-style: none; 
 
    padding: 0px; 
 
    display: flex; 
 
} 
 
.nav li { 
 
    text-align: center; 
 
    position: relative; 
 
    flex-grow: 1; 
 
    border-right: 1px solid white; 
 
} 
 
.tombol li a { 
 
    padding: 5px 5px; 
 
    color: black; 
 
    text-decoration: none; 
 
    font-family: "Menu"; 
 
    position: relative; 
 
    font-size: 24px; 
 
} 
 
.tombol li:hover { 
 
    background: brown; 
 
    color: white; 
 
    transition-duration: 0.3s; 
 
    -moz-transition-duration: 0.3s; 
 
    -webkit-transition-duration: 0.3s; 
 
} 
 
#slider .animasi1 a.active, 
 
.a1.active, 
 
#slider a.active + a.a1 { 
 
    background-color: yellow; 
 
} 
 
#slider .animasi2 a.active, 
 
.a2.active, 
 
#slider a.active + a.a2 { 
 
    background-color: purple; 
 
} 
 
#slider .animasi3 a.active, 
 
.a3.active, 
 
#slider a.active + a.a3 { 
 
    background-color: green; 
 
} 
 
#slider .animasi4 a.active, 
 
.a4.active, 
 
#slider a.active + a.a4 { 
 
    background-color: red; 
 
} 
 
#slider .animasi5 a.active, 
 
.a5.active, 
 
#slider a.active + a.a5 { 
 
    background-color: pink; 
 
} 
 
#slider .animasi6 a.active, 
 
.a6.active, 
 
#slider a.active + a.a6 { 
 
    background-color: coral; 
 
} 
 
@media only screen and (max-device-width: 480px) { 
 
    #menu { 
 
    height: 80px; 
 
    } 
 
    #menu label { 
 
    width: 80px; 
 
    height: 80px; 
 
    border-right: 1px solid red; 
 
    } 
 
    #menu label>img { 
 
    width: 80px; 
 
    height: 80px; 
 
    } 
 
    #slider { 
 
    margin-left: 35%; 
 
    width: 300px; 
 
    height: 460px; 
 
    position: absolute; 
 
    } 
 
    #materi { 
 
    margin: 0px; 
 
    position: absolute; 
 
    margin-top: 480px; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
    } 
 
    #wayang { 
 
    z-index: 1; 
 
    position: absolute; 
 
    background: url(../gmenu/menu1.jpg) repeat; 
 
    margin-top: 340px; 
 
    height: calc(100% - 340px); 
 
    } 
 
    #jwayang { 
 
    z-index: 2; 
 
    position: absolute; 
 
    background: url(../gmenu/menu2.jpg) repeat; 
 
    margin-top: 340px; 
 
    height: calc(100% - 340px); 
 
    } 
 
    #twayang { 
 
    z-index: 3; 
 
    position: absolute; 
 
    background: url(../gmenu/menu3.jpg) repeat; 
 
    margin-top: 340px; 
 
    height: calc(100% - 340px); 
 
    } 
 
    #vwayang { 
 
    z-index: 4; 
 
    position: absolute; 
 
    background: url(../gmenu/menu4.jpg) repeat; 
 
    margin-top: 340px; 
 
    height: calc(100% - 340px); 
 
    } 
 
    #swayang { 
 
    z-index: 5; 
 
    position: absolute; 
 
    background: url(../gmenu/menu5.jpg) repeat; 
 
    margin-top: 340px; 
 
    height: calc(100% - 340px); 
 
    } 
 
    #kontak { 
 
    z-index: 6; 
 
    position: absolute; 
 
    background: url(../gmenu/menu6.jpg) repeat; 
 
    margin-top: 340px; 
 
    height: calc(100% - 340px); 
 
    } 
 
    #menu label { 
 
    display: block; 
 
    } 
 
    .nav { 
 
    top: 340px; 
 
    position: absolute; 
 
    background: url(../gmenu/menu.png) repeat; 
 
    width: 30%; 
 
    margin-left: -80%; 
 
    transition: all 1s; 
 
    } 
 
    .tombol { 
 
    flex-direction: column; 
 
    } 
 
    .tombol li { 
 
    border-top: 1px; 
 
    } 
 
    .tombol li a { 
 
    height: 60px; 
 
    padding: 5px 5px; 
 
    color: brown; 
 
    text-decoration: none; 
 
    font-family: "Menu"; 
 
    position: relative; 
 
    font-size: 48px; 
 
    } 
 
    a { 
 
    width: 100%; 
 
    display: block; 
 
    } 
 
    #tbl-menu:checked ~ .nav { 
 
    position: absolute; 
 
    margin: 0; 
 
    z-index: 10; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="menu"> 
 
    <input type="checkbox" id="tbl-menu" /> 
 
    <label for="tbl-menu"> 
 
    <img src="drop.png" height="40px" width="40px " alt=""> 
 
    </label> 
 
    <nav class="nav"> 
 
    <ul class="tombol"> 
 
     <li class="tombolmenu"><a class="a1" href="#wayang">Wayang</a> 
 
     </li> 
 
     <li><a class="a2" href="#jwayang">Jenis Wayang</a> 
 
     </li> 
 
     <li><a class="a3" href="#twayang">Tokoh Wayang</a> 
 
     </li> 
 
     <li><a class="a4" href="#vwayang">Video Wayang</a> 
 
     </li> 
 
     <li><a class="a5" href="#swayang">Soal Latihan</a> 
 
     </li> 
 
     <li><a class="a6" href="#kontak">Kontak</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div> 
 

 
<div id="slider"> 
 
    <div id="mask"> 
 
    <ul> 
 
     <li id="satu" class="animasi1"> 
 
     <a href="#wayang"> 
 
      <img src="gambar/wayang.jpg" alt="wayang" /> 
 
     </a> 
 
     <div class="tooltip"> 
 
      <h1>Wayang</h1> 
 
     </div> 
 
     </li> 
 

 
     <li id="dua" class="animasi2"> 
 
     <a href="#jwayang"> 
 
      <img src="gambar/jwayang.jpg" alt="jenis wayang" /> 
 
     </a> 
 
     <div class="tooltip"> 
 
      <h1>Jenis Wayang</h1> 
 
     </div> 
 
     </li> 
 

 
     <li id="tiga" class="animasi3"> 
 
     <a href="#twayang"> 
 
      <img src="gambar/twayang.jpg" alt="tokoh wayang" /> 
 
     </a> 
 
     <div class="tooltip"> 
 
      <h1>Tokoh Wayang</h1> 
 
     </div> 
 
     </li> 
 

 
     <li id="empat" class="animasi4"> 
 
     <a href="#vwayang"> 
 
      <img src="gambar/vwayang.jpg" alt="Video wayang" /> 
 
     </a> 
 
     <div class="tooltip"> 
 
      <h1>Video Wayang</h1> 
 
     </div> 
 
     </li> 
 

 
     <li id="lima" class="animasi5"> 
 
     <a href="#swayang"> 
 
      <img src="gambar/swayang.jpg" alt="Soal latihan" /> 
 
     </a> 
 
     <div class="tooltip"> 
 
      <h1>Soal Latihan</h1> 
 
     </div> 
 
     </li> 
 

 
     <li id="enam" class="animasi6"> 
 
     <a href="#kontak"> 
 
      <img src="gambar/kontak.jpg" alt="kontak" /> 
 
     </a> 
 
     <div class="tooltip"> 
 
      <h1>Kontak</h1> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="progress-bar"></div> 
 
    </div

に私のプロジェクトhttps://jsfiddle.net/JonoRecher/twh16yxf/

Answer 1

は、ナビゲーションメニューのクリックでスクリプトを変更するにはを参照してくださいコード：

$(document).ready(function() { 
    $("nav a").click(function() { 
    $("nav a").removeClass("active"); 
    $("#slider a").removeClass("active"); 
    var findindex = $('nav a').index(this); 
    $("nav a").eq(findindex).addClass("active"); 
    $("#slider a").eq(findindex).addClass("active"); 
    }); 
    }); 

ナビゲーションメニューのインデックス値を見つけるには、スライダー1と同じです。まず最初のメニュー項目のインデックスを見つけてスライダーでも使用します。

Answer 2

あなたはスライダークリックした要素のインデックスを取得し、スライダーの指標によってメニュー要素にアクティブなクラスを追加する必要があり、

$(document).ready(function() { 
    $("nav li").click(function() { 
    $("#slider a,nav a").removeClass("active"); 
    var _index = $(this).index(); 
    $("#slider a,nav a").eq(_index).addClass("active"); 
    }); 
    });