как пользоваться show hide в jquery?

Question

Всем привет, на сайте есть меню, и я хочу чтобы при переходе на другой раздел справа появлялся другой контент

я сделал это с допогою jQuerry, но только для 2 элементов меню, я не могу понять как сделать это для всех

$(function () {
  $(".sidebar-link").click(function () {
   $(".sidebar-link").removeClass("is-active");
   $(this).addClass("is-active");
  });
 });  
//  .trending, .favorite
$(function () {
  $(".logo, .logo-expand, .discover").on("click", function (e) {
  $(".main-container").removeClass("show");
  $(".main-container").scrollTop(0);
  });
$(".trending, .slider-area").on("click", function (e) {
   $(".main-container").addClass("show");
   $(".main-container").scrollTop(0);
   $(".sidebar-link").removeClass("is-active");
   $(".trending").addClass("is-active");
});

.slider-area {
    display: none;
}
.show .slider-area {
    display: flex;
    background-color: #11142D;
    width: 250px;
    height: 250px;
}
.main-area{
    display: none;
    }
.show .main-area{
    display: flex;
    background-color: #077780;
    width: 250px;
    height: 250px;
}

<div class="side-wrapper">
                <div class="side-menu">
                <a class="sidebar-link discover is-active"  href="#">
                    Home
                </a>
                <a class="sidebar-link trending"  href="#">
                   
                    My Courses
                </a>
                <a class="sidebar-link favorite"  href="#">
                   
                    Favorite
                </a>
</div>
        <div class="main-container">
            <div class="main-header anim"  style="--delay: 0s">Discover</div>
            <div class="slider-area">
            </div>
        </div>

Answer 1

Несколько раз вы уже пытались переформулировать вопрос таким образом, чтобы он стал понятен. Однако, не вышло. Хорошо, попробую предугадать поставленную вами задачу. Пожалуйста, смотрите ответ: результат таким должен быть?

И еще вопрос: а вы уверены, что вам для реализации поставленной задачи таки необходима библиотека jQuery? Может быть достаточно только CSS? Пример ниже:

.tabs {
  list-style: none;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

.tabs li {
  display: block;
}

.tabs input[type="radio"] {
  position: absolute;
  top: 0;
  left: -9999px;
}

.tabs label {
  display: inline-block;
  position: relative;
  padding: 6px 100px 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: monospace;
  transition: all 0.2s ease-in-out;
}

.tabs label:hover {}

.tabs [id^="tab"]:checked+label {
  top: 0;
  color: #fff;
  background: #6c5ecf;
}

.tabs [id^="tab"]:checked~[id^="tab-content"] {
  display: block;
}

.content {
  display: none;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  padding: 30px;
  background: #6c5ecf;
  color: #fff;
}

<ul class="tabs">
  <li>
    <input type="radio" name="tabs" id="tab1" checked />
    <label for="tab1" aria-selected="true" tabindex="0">Ссылка 1</label>
    <div id="tab-content1" class="content" aria-hidden="false">
      <p>Текст 1</p>
    </div>
  </li>
  <li>
    <input type="radio" name="tabs" id="tab2" />
    <label for="tab2" aria-selected="false" tabindex="0">Ссылка 2</label>
    <div id="tab-content2" class="content" aria-hidden="true">
      <p>Текст 2</p>
    </div>
  </li>
</ul>

БЛОГ НА HUSL

как пользоваться show hide в jquery?

Ответы (1 шт):