Не работает jquery tabs

148
28 сентября 2018, 09:50

Есть такой код для навигации .При нажати на 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>

Answer 1

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

Answer 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>

Answer 3

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

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

READ ALSO
Эквалайзер или визуалайзер в WPF
c#

Эквалайзер или визуалайзер в WPF

Я делаю аудио плеер в WPFИ у меня есть ellipse

 195
Как получить позицию одного телефона с другого?
c#

Как получить позицию одного телефона с другого?

Во время создание игры на Unity, с помощью ARKit и UNET, возникла такая проблемаКогда первый игрок входит в игру, у него координаты в сцене Unity ровны...

 143
Объект проходит сквозь другие
c#

Объект проходит сквозь другие

Движение объекта осуществляется через:

 130
Проблема с запуском gulp в Visual Studio
c#

Проблема с запуском gulp в Visual Studio

При запуске gulpjs файла в Visual Studio получаю следующую ошибку:

 162