javascript - 在一页上为 CSS 中的 2 个元素创建事件菜单

Question

我需要更改 slider 上单击事件的背景。我需要一张“喜欢”的图片，但我的代码无法正常工作:

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

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