мой jquery не работает

Я создаю сайт wordpress, в котором у меня есть вкладки дизайна. Я хочу, чтобы при щелчке по первой вкладке он должен отображать содержимое div с id = tab1.мой jquery не работает

И когда я нажимаю на вторую вкладку, он должен отображать коментарий div с id = tab2.

Но ничего не работает.

Вот мой код jquery.

$(document).ready(function() { 
    //Hide all content 
    $(".tab_content").hide(); 
    //Activate first tab 
    $(".tabs_links ul li:first").addClass("active").show(); 
    //Show first tab content 
    $(".tab_content:first").show(); 
    //On Click Event 
    $(".tabs_links ul li").click(function() { 
     //Remove any "active" class 
     $(".tabs_links ul li").removeClass("active"); 
     //Add "active" class to selected tab 
     $(this).addClass("active"); 
     //Hide all tab content 
     $(".tab_content").hide(); 
     //Find the rel attribute value to identify the active tab + content 
     var activeTab = $(this).find("a").attr("href"); 
     //Fade in the active content 
     $(activeTab).fadeIn(); 
     return false; 
    }); 
});

и вот мой html-код.

<div class="tabs_links"> 
    <ul> 
     <li><a href="#tab1">News and Events</a></li> 
     <li><a class="nobg" href="#tab4">Blog</a></li> 
    </ul> 
</div> 
<div style="display: none;" id="tab1" class="tab_content"> 
    content of first tab 
</div> 
<div style="display: none;" id="tab4" class="tab_content"> 
    content of second tab 
</div>

Я не знаю, в чем проблема. Кто-нибудь знает решение?

источник

2012-01-19 Ahmad

почему бы не использовать вкладки jQueryUI ...: http://jqueryui.com/demos/tabs/ –

код похоже, работает отлично: http://jsfiddle.net/gion_13/MeMZv/. Возможно, вы не настроили ссылки на сценарии. –

Здесь вам нужно сделать немного CSS вещи :) Дрессировка страницу с кодом:

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<style> 
.tabs_links ul li{display:inline;} 
a{text-decoration:none;color:black;} 
.active{background-color:#CECECE;} 
.tab_content{margin-left:30px;border:1px dotted black;} 
</style> 
<script type="text/javascript"> 
$(document).ready(function() { 
$(".tab_content").hide(); 
$(".tabs_links ul li:first").addClass("active").show(); 
$(".tab_content:first").show(); 

    $(".tabs_links ul li").click(function() { 
      $(".tabs_links ul li").removeClass("active"); 
      $(this).addClass("active"); 
      $(".tab_content").hide(); 
      var activeTab = $(this).find("a").attr("href"); 
      $(activeTab).fadeIn(); 
      return false; 
    }); 

}); 
</script> 
</head> 
<body> 
<div class="tabs_links"> 
      <ul> 
       <li><a href="#tab1">News & Events</a></li> 
       <li><a class="nobg" href="#tab4">Blog</a></li> 
      </ul> 
      </div> 
<div style="display: none;" id="tab1" class="tab_content"> 
First First First First First First 
</div> 
<div style="display: none;" id="tab4" class="tab_content"> 
Second Second Second Second Second Second 
</div> 
</body> 
</html>

источник

2012-01-19 12:36:38

Я проверил ваш код, его работоспособность при создании новой html-страницы. Но в Wordpress это не сработало. Я показываю все это на index.php – Ahmad

Позвольте мне отладить вашу рабочую страницу. Какая ссылка на сайте WordPress? –

Его в localhost :( – Ahmad

Ваш код работает хорошо.

Я думаю, что проблема в том, ваш браузер или JQuery плагин

Использование JQuery 1.4.2 плагин

источник

2012-01-19 12:41:04 Kishor

Я использовал этот '' но не сработало. – Ahmad

перейдите по этому адресу и проверьте свой код http://jsfiddle.net/9rBdx/ – Kishor

мой jquery не работает

ответ

Смежные вопросы