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

我建议您查看offictal UI文档，特别是tabs page。我认为你的标记有一些错误，这就是我怎么做的：

<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，其中包含所有的tab div和包含各种链接的列表，您的代码中遗漏了这一点。然后，在您的jQuery代码中，您会遗漏对.tabs()的调用，它可以有效地创建选项卡。假设你在哪里使用了我之前发布的标记，那么你将如何做到这一点：

$('#tabs_container').tabs()