Разные блоки вкладок Javascript

Question

Я разрабатываю несколько вкладок на веб-сайте для отображения некоторых категорий с X количеством сообщений на каждой вкладке.

Я не знаю много о JavaScript, и я нашел, что это сделать эффекты на вкладках

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("a.maintab").click(function() { // When a link is clicked 
     $(".tabactive").removeClass("tabactive"); // switch all tabs off 
     $(this).addClass("tabactive"); // switch this tab on 
     $(".maintabcontent").slideUp(); // slide all content up 
     var content_show = $(this).attr("title"); // slide this content up 
     $("#"+content_show).slideDown(); 
    }); 
    }); 
</script> 

Проблема заключается в том, когда у меня есть два блока, каждый из которых с различными вкладками, если я выбрал вкладку на втором блоке, 1-й - закрытие (слайды) и наоборот.

Я хочу, чтобы они всегда были открытыми, не матер, какая вкладка я выбрал из блоков. Можете ли вы мне помочь с помощью javascript? Кстати, слайд-эффекты не важны, вы можете включить toggle().

EDIT: http://paste2.org/Y3J1Lm7d

Вот это образец одного блока

Answer 1

Так от того, что я могу собрать, вы просто хотите использовать вкладки, как «кнопки» фактически не влияя на «блоки» контента под?

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

Это Javascript должен работать

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("a.maintab").click(function() { // When a link is clicked 
     $(".tabactive").removeClass("tabactive"); // switch all tabs off 
     $(this).addClass("tabactive"); // switch this tab on 

     var content_show = $(this).attr("title"); // id of the linked content 
     $("#"+content_show).siblings().slideUp(); // slide siblings up 
     $("#"+content_show).slideDown(); // slide itself down 
    }); 
    }); 
</script> 

Если эти два блока контента вкладки:

<div id="TabElements1"> 
    <div id="maintab1" class="maintabcontent"> 
     {custom category="2" aviable="main" from="0" limit="16" order="rating" cache="no"} 
    </div> 
    <div id="maintab2" class="maintabcontent"> 
     {custom category="3" aviable="main" from="0" limit="16" cache="no"} 
    </div> 
</div> 

<div id="TabElements2"> 
    <div id="maintab3" class="maintabcontent"> 
     {custom category="2" aviable="main" from="0" limit="16" order="rating" cache="no"} 
    </div> 
    <div id="maintab4" class="maintabcontent"> 
     {custom category="3" aviable="main" from="0" limit="16" cache="no"} 
    </div> 
</div> 

См скрипку: http://jsfiddle.net/Cz5te/2/