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

#html #jquery #css #tabs

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



  
Service 1
  
Service 2
  
Service 3




  

    
Text 1
  
  

    
Text 2
  
  

    
Text 3
  





    

Ответы

Ответ 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;
}



  
Service 1
  
Service 2
  
Service 3




  

    
Text 1
  
  

    
Text 2
  
  

    
Text 3
  




Ответ 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;
}



  
Service 1
  
Service 2
  
Service 3




  

    
Text 1
  
  

    
Text 2
  
  

    
Text 3
  




Ответ 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;
}




  
  
  



  

    

      
Nunc Dolor
      
Dhtc Gdolor
      
Ndfc Dofhor
    
    

      
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!
    
    

      
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!
    
    

      
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!