Как сделать вкладку с помощью jQuery

Question

Как сделать вкладки с помощью jQuery?

Вот что мне нужно. Когда я нажимаю ссылку слева (см. Изображение), мне нужно изменить содержимое справа.

То есть, когда я нажимаю маркетинга мне нужно сделать, это следующие функции: класс

• удалить активные из ** stratergy и его contets **
• затем добавить класс активного до маркетинг и его содержание

Вот исходный код

<ul class="marketing_box padbot30 padtop30"> 
    <li class="scroll_btn active "><a href="#tabs-1">Strategy</a> </li> 
    <li class="scroll_btn "><a href="#tabs-2">Marketing</a> </li> 
    <li class="scroll_btn "><a href="#tabs-3">Operations</a> </li> 
    <li class="scroll_btn "><a href="#tabs-4">Organisation</a> </li> 
    <li class="scroll_btn "><a href="#tabs-5">CorporateDevelopement</a> </li> 
</ul> 

<span class="active" id="tabs-1"></span> 
<span id="tabs-2"></span> 

Гото ссылку на демоhttp://theteamconsultancy.com/services.html#service-1

редактировать: я нашел половину себя

$(document).ready(function() { 
$('.acordian ul li ').click(function(){ 
     $('.acordian ul li ').removeClass('active') 
     $(this).addClass('active'); 
}); 
}); 

Answer 1

Попробуйте это:

$('.marketing_box li').click(function() { 
    $('.scroll_btn').removeClass('active'); 
$(this).addClass('active'); 
}); 

Answer 2

$(".scroll_btn a").click(function(event){ //find <a> inside <class="scroll_btn"> and do something when it's clicked 
    event.preventDefault(); //Stops any normal click action 
    $('.active').removeClass("active"); //I suppose your active class css holds "display: block" and all #tabs-n are set to display:none by default. 
    var letsShowThisOne = $(this).attr('href'); //Retrieve your link location - this is actually the ID of the next element we need. 
    $(letsShowThisOne).addClass("active"); //Again, i suppose just adding this would do it, but I dont know your css. 
} 

Я не уверен, как работает остальная часть вашего кода, и вы не поместили какой-либо jsfiddle, поэтому я просто пошел с моими предположениями и попытался сделать что-то, что должно работать в вашем примере. Каждая строка прокомментирована, чтобы объяснить, что она делает.

Это изменяет содержимое, если ваш css настроен так, как кажется в вашем примере. Он не будет менять кнопку. для этого добавить

$(this).addClass("active"); 

Предупреждение, однако, вы используете класс «активный» на обеих кнопках и содержимом. Убедитесь, что конфликт css отсутствует, и все должно быть в порядке. Предполагается, что контент скрыт, когда «активный» класс отсутствует, а «активный» класс кнопки похож, что он просто добавляет к нему дополнительные стили.

Answer 3

Надежда ниже код работы для вас

$('.marketing_box li').click(function() { 
    $('.scroll_btn').removeClass('active'); 
    $(this).addClass('active'); 
    var $id = $(this).find('a').attr('href'); 
    $('span[id*="tabs-"]').removeClass('active'); 
    $('span'+$id).addClass('active'); 
}); 

Answer 4

$(document).ready(function() { 
$('.acordian ul li ').click(function(){ 
     $('.acordian ul li ').removeClass('active') 
     $(this).addClass('active'); 
    var $id = $(this).find('a').attr('href'); 
    $('.prod_tab span[id*="tabs-"]').removeClass('active'); 
    $('.prod_tab span'+ $(this).find('a').attr('href')).addClass('active'); 


}); 
}); 

работает, но есть прыжки