Jquery Tab Menu için next button ekleme

Öncelikle merhaba,
html css ve js ile kodlamaya çalıştığım bir tab menu var. Kodlarım düzgün çalışıyor sadece ekstra bir özellik eklemek istiyorum. .content-button classı olarak ekledim iteme tıklandığında tab menu bir sonraki tab menüye geçmesini istiyorum.

Umarım anlatabilmişimdir. Yardım edecek kişilere teşekkür ederim.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>project</title>
  </head>
  <body>
    <div class="container">
      <ul class="tab-menu">
        <li class="current">
          <a href="#tab1"> TAB 1 </a>
        </li>
        <li>
          <a href="#tab2"> TAB 2 </a>
        </li>
      </ul>
      <div class="tab-container">
        <div id="tab1" class="tab-content">
          <div class="conten-text">
            <h2>Kolay Panel Gezinimi</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation. consectetur
              adipiscing elit, sed do eiusmod tempor incididunt magna aliqua. Ut
              enim ad minim veniam, quis
            </p>
          </div>
          <div class="content-btn">
            <i class="fa fa-arrow-right"></i>
          </div>
        </div>
        <div id="tab2" class="tab-content">
          <div class="conten-text">
            <h2>Kolay Panel Gezinimi</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation. consectetur
              adipiscing elit, sed do eiusmod tempor incididunt magna aliqua. Ut
              enim ad minim veniam, quis
            </p>
          </div>
          <div class="content-btn">
            <i class="fa fa-arrow-right"></i>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>


.container {
  width: 728px;
  height: 400px;
  margin: 0 auto;
  margin-top: 50px;
}

.tab-menu {
  display: block;
  margin: 0;
  padding: 0;
  text-align: center;
}

.tab-menu li {
  list-style: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 10px 10px 0;
  box-shadow: 0 6px 18px rgba(214, 214, 214, 0.5);
  width: 85px;
  height: 85px;
  border-radius: 50%;
}

.tab-menu li a {
  display: block;
  color: black;
  text-decoration: none;
}

.tab-content {
  display: none;
  height: 350px;
}
.tab-content .content-btn {
  width: 35px;
  height: 35px;
  border: 2px solid #00ABFF;
	background-color: #000;
  padding: 5px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;

  margin-left: auto;
  margin-top: -115px;
}
.tab-content h2 {
  font-size: 38px;
  margin-bottom: 25px;
  font-weight: 600;
}
.tab-content p {
  font-size: 22px;
  width: 80%;
}

#tab1 {
  display: block;
}

.tab-container {
  margin-top: 30px;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(214, 214, 214, 0.5);
  padding: 30px;
  color: black;
}

.current {
  background-color: #00ABFF;
  box-shadow: 0 6px 18px #00aaff9f !important;
  border-radius: 50%;
  width: 85px;
  height: 85px;
}

$(document).ready(function () {
  $(".tab-menu a").click(function (event) {
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).fadeIn();
  });
});

Jquery Tab Menu için next button ekleme

Soru hatalı mı? 👎

Cevap yaz

Cevaplar (1)