5

Есть такой код для навигации .При нажати на service должно открыватся нужное окно.Есть задача использовать только jquery код.Активные кнопки справляются с задачей хорошо а вот с блоками проблема.Помогите разобратся.Заранее спасибо

Вот код

$(document).ready(function() {
  $(".tabtext").click(function() {
    $(".tabtext").removeClass("active");
    $(this).addClass("active");
  });
});

$(document).ready(function() {
  $(".tabtext").click(function() {
    $(".content").hasClass("visible");
    $(".content").removeClass("visible");
    $(".content").addClass("visible");
  });
});
.tabs {
  width: 30em;
  height: auto;
  display: inline-block;
  text-align: center;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 1em;
  background-color: silver;
}

.tabtext {
  display: inline;
  font-size: 1em;
  padding: 1em;
  margin: 0 0.2em 0 0.2em;
}

.active {
  color: red;
}

.content {
  width: 30em;
  display: block;
  text-align: center;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: gray;
}

.context {
  width: 100%;
  height: auto;
  padding: 2em;
  display: none;
  text-align: center;
  box-sizing: border-box;
}

.context>h1 {
  font-size: 1em;
}

.visible {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">

  <h1 class="tabtext  active">Service 1</h1>
  <h1 class="tabtext">Service 2</h1>
  <h1 class="tabtext">Service 3</h1>
</div>

<div class="content">

  <div class="context visible">
    <h1>Text 1</h1>
  </div>
  <div class="context">
    <h1>Text 2</h1>
  </div>
  <div class="context">
    <h1>Text 3</h1>
  </div>

</div>

2
  • 1
    Есть кнопочка такая называется: "Фрагмент кода на JavaScript/HTML/CSS Ctrl-M"
    – Netahaki
    Commented 26 июл. 2018 в 16:16
  • Спасибо всем кто помог . Буду учитывать Commented 26 июл. 2018 в 16:44

3 ответа 3

2

$(document).ready(function() {
  $(".tabs .tabtext").click(function() {
    $(".tabs .tabtext").removeClass("active");
    $(this).addClass("active");

    $(".content .context").removeClass("visible");
    $(".content .context").eq($(this).index()).addClass("visible");
  });
});
.tabs {
  width: 30em;
  height: auto;
  display: inline-block;
  text-align: center;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 1em;
  background-color: silver;
}

.tabtext {
  display: inline;
  font-size: 1em;
  padding: 1em;
  margin: 0 0.2em 0 0.2em;
}

.active {
  color: red;
}

.content {
  width: 30em;
  display: block;
  text-align: center;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: gray;
}

.context {
  width: 100%;
  height: auto;
  padding: 2em;
  display: none;
  text-align: center;
  box-sizing: border-box;
}

.context>h1 {
  font-size: 1em;
}

.visible {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">

  <h1 class="tabtext  active">Service 1</h1>
  <h1 class="tabtext">Service 2</h1>
  <h1 class="tabtext">Service 3</h1>
</div>

<div class="content">

  <div class="context visible">
    <h1>Text 1</h1>
  </div>
  <div class="context">
    <h1>Text 2</h1>
  </div>
  <div class="context">
    <h1>Text 3</h1>
  </div>

</div>

2
$(".content").hasClass("visible"); // проверяете наличие класса
$(".content").removeClass("visible"); // убираете класс у всех
$(".content").addClass("visible"); // добавляете класс всем

Так не пойдёт, нужно явно указать, кого мы хотим отображать

Например, так:

$(".context").removeClass("visible");
$(".context").eq($(this).index()).addClass("visible");

$(document).ready(function() {
  $(".tabtext").click(function() {
    $(".tabtext").removeClass("active");
    $(this).addClass("active");
  });
});

$(document).ready(function() {
  $(".tabtext").click(function() {
    $(".context").removeClass("visible");
    $(".context").eq($(this).index()).addClass("visible");
  });
});
.tabs {
  width: 30em;
  height: auto;
  display: inline-block;
  text-align: center;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 1em;
  background-color: silver;
}

.tabtext {
  display: inline;
  font-size: 1em;
  padding: 1em;
  margin: 0 0.2em 0 0.2em;
}

.active {
  color: red;
}

.content {
  width: 30em;
  display: block;
  text-align: center;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: gray;
}

.context {
  width: 100%;
  height: auto;
  padding: 2em;
  display: none;
  text-align: center;
  box-sizing: border-box;
}

.context>h1 {
  font-size: 1em;
}

.visible {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">

  <h1 class="tabtext  active">Service 1</h1>
  <h1 class="tabtext">Service 2</h1>
  <h1 class="tabtext">Service 3</h1>
</div>

<div class="content">

  <div class="context visible">
    <h1>Text 1</h1>
  </div>
  <div class="context">
    <h1>Text 2</h1>
  </div>
  <div class="context">
    <h1>Text 3</h1>
  </div>

</div>

2

Практиковался как-то, вот и пригодилось

$(function() {

  let $links = $('ul li a');
  let $allDivs = $('.wrapper div');

  $links.on('click', function(e) {
    $links.removeClass('active_links');
    $(this).addClass('active_links');
    e.preventDefault();
    let $text = $($(this).attr('href'));
    $allDivs.hide();
    $text.slideToggle();

  })

});
* {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

.wrapper {
  margin-left: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 300px;
  width: 600px;
  border: 1px solid black;
  border-radius: 4px;
  overflow: hidden;
}

#p_1,
#p_2,
#p_3 {
  display: none;
  margin-top: 50px;
  padding: 0px 40px;
}

#p_1 {
  display: flex;
}

#p_1 p,
#p_2 p,
#p_3 p {
  font-size: 20px;
}

.wrapper ul {
  padding: 20px 0px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  background-color: #eee;
}

ul li {
  list-style: none;
  margin: 10px 20px;
}

ul li a:hover {
  background-color: #0769AD;
  transition: 0.5s;
}

ul li a {
  border-radius: 4px;
  transition: 0.8s;
  border: 1px solid black;
  padding: 10px;
  text-decoration: none;
  color: black;
  background-color: white;
}

.active_links {
  background-color: #007FFF;
  color: white;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>Module - 8</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div class="wrapper">
    <ul>
      <li><a class="active_links" href="#p_1">Nunc Dolor</a></li>
      <li><a href="#p_2">Dhtc Gdolor</a></li>
      <li><a href="#p_3">Ndfc Dofhor</a></li>
    </ul>
    <div id="p_1">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur laborum earum minus placeat, fugit incidunt eos nisi velit doloremque temporibus quam culpa, itaque repudiandae fugiat quis fuga perspiciatis explicabo! Dolorem!</p>
    </div>
    <div id="p_2">
      <p>dfghpsum dolor sit amet, consectetur adipisicing elit. Tenetur laborum earum minus placeat, fugit incidunt eos nisi velit doloremque temporibus quam culpa, itaque repudiandae fugiat quis fuga perspiciatis explicabo! Dolorem!</p>
    </div>
    <div id="p_3">
      <p>vbnvbnipsum dolor sit amet, consectetur adipisicing elit. Tenetur laborum earum minus placeat, fugit incidunt eos nisi velit doloremque temporibus quam culpa, itaque repudiandae fugiat quis fuga perspiciatis explicabo! Dolorem!</p>
    </div>
  </div>
</body>

</html>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.