在一页的CSS中为2个元素创建活动菜单

I need to change background on click event on slider. I need a 'like' image but my code is not working:

我需要更改滑块上单击事件的背景。我需要一个'喜欢'的图像，但我的代码不起作用：

 $(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

see my project https://jsfiddle.net/JonoRecher/twh16yxf/

看我的项目https://jsfiddle.net/JonoRecher/twh16yxf/

2 个解决方案

#1

To change the script in nav menu click in the below code:

要在导航菜单中更改脚本，请单击以下代码：

 $(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");
    });
  });

To find the index value of navigation menu it is same as slider one. so first find the index of first menu item then we use it in slider also.

要查找导航菜单的索引值，它与滑块1相同。所以首先找到第一个菜单项的索引然后我们也在滑块中使用它。

#2

you have to get slider clicked element index and add active class to menu element by slider index,

你必须得到滑块点击元素索引并按滑块索引将活动类添加到菜单元素，

$(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");
    });
  });

#1