Система вкладок JQuery

Question

Написал этот скрипт, и все это мне кажется нормальным, но по какой-то причине jquery не хочет работать. Я пытался заставить это работать целую вечность без удачи. Если бы ты не возражал, ты мог бы просмотреть это для меня. Прошу прощения, если мне не хватает чего-то простого, но мои глаза теперь застеклены.

вот HTML & php

<ul class="tabs">
     <li class=""><a href="#about">About</a></li>
        <li class=""><a href="#contact">Contact <?php echo $retailers['Retailer']['company'];?></a></li>
 </ul>
    <div class="tab_container">
  <div id="about" class="tab_content">
         <h3>About <?php echo $retailers['Retailer']['company'];?></h3>
            <p><?php echo $retailers['Retailer']['description'];?></p>
  </div>
  <div id="contact" class="tab_content">
         <h3>Contact <?php echo $retailers['Retailer']['company'];?></h3>
            <h4>Email <?php echo $retailers['Retailer']['company'];?></h4>
            <p><?php echo $retailers['Retailer']['email_address'];?></p>
            <h4>Phone <?php echo $retailers['Retailer']['company'];?></h4>
            <p><?php echo $retailers['Retailer']['phone'];?></p>
            <h4>Fax <?php echo $retailers['Retailer']['company'];?></h4>
            <p><?php echo $retailers['Retailer']['fax'];?></p>
            <h4>Write to <?php echo $retailers['Retailer']['company'];?></h4>
            <p><?php echo $retailers['Retailer']['address_line_1'];?>,<br /><?php echo $retailers['Retailer']['address_line_2'];?>,<br /><?php echo $retailers['Retailer']['city'];?>,<br /><?php echo $retailers['Retailer']['county'];?>,<br /><?php echo $retailers['Retailer']['postcode'];?></p>
  </div> 
    </div> 

Вот jquery:

<script type="text/javascript" language="javascript">
$(document).ready(function() {

 //Default Action
 $(".tab_content").hide();  
 $("ul.tabs li:first").addClass("active").show();  
 $(".tab_content:first").show(); 

 //On Click Event
 $("ul.tabs li").click(function() {
  $("ul.tabs li").removeClass("active"); 
  $(this).addClass("active"); 
  $(".tab_content").hide();  
  var activeTab = $(this).find("a").attr("href");  
  $(activeTab).fadeIn(); 
  return false;
 });
}); 
</script>

Извините, я не могу дать вам все ссылки, кроме как на локальной машине.

Спасибо, ребята

Джейми

Answer 1

Я предлагаю вам взглянуть на официальную документацию по пользовательскому интерфейсу jQuery, в частности на страницу tabs . Я думаю, что ваша разметка имеет некоторые ошибки, вот как я бы это сделал:

<div id="tabs_container">
<ul>
    <li class=""><a href="#about">About</a></li>
    <li class=""><a href="#contact">Contact <?php echo $retailers['Retailer']['company'];?></a></li>
</ul>
  <div id="about" class="tab_content">
         <h3>About <?php echo $retailers['Retailer']['company'];?></h3>
            <p><?php echo $retailers['Retailer']['description'];?></p>
  </div>
  <div id="contact" class="tab_content">
         <h3>Contact <?php echo $retailers['Retailer']['company'];?></h3>
            <h4>Email <?php echo $retailers['Retailer']['company'];?></h4>
            <p><?php echo $retailers['Retailer']['email_address'];?></p>
            <h4>Phone <?php echo $retailers['Retailer']['company'];?></h4>
            <p><?php echo $retailers['Retailer']['phone'];?></p>
            <h4>Fax <?php echo $retailers['Retailer']['company'];?></h4>
            <p><?php echo $retailers['Retailer']['fax'];?></p>
            <h4>Write to <?php echo $retailers['Retailer']['company'];?></h4>
            <p><?php echo $retailers['Retailer']['address_line_1'];?>,<br /><?php echo  $retailers['Retailer']['address_line_2'];?>,<br /><?php echo $retailers['Retailer']['city'];?>,<br /><?php echo $retailers['Retailer']['county'];?>,<br /><?php echo $retailers['Retailer']['postcode'];?></p>
  </div> 

Вам нужен div, который содержит все вкладки div и список с различными ссылками, вы пропустили это в своем коде. Затем в вашем коде jQuery вы пропускаете вызов .tabs (), который эффективно создает вкладки. Вот как бы вы это сделали, если бы вы использовали предыдущую разметку, которую я разместил:

$('#tabs_container').tabs()