0

当有人点击链接时，我编写了这段代码来加载 DIV 的内容。

现在，如果您单击一个链接两次，它正在删除内容。

这是代码：

$('a').click(function() {
   var id = $(this).attr('class');
 if(id == 'first')
    {
      $('.active').removeClass('active');   
      $('a.first').addClass('active');  
    } 
else if(id == 'second')    
     {
      $('.active').removeClass('active');   
      $('a.second').addClass('active');  
    } 

   $('#first').toggle(id == 'first');

   $('#second').toggle(id == 'second');
});​

HTML：

<a class="first">one</a>
<a class="second">two</a>
<div>
   <li id="first">
       <h2>pen</h2>
       <div>
           <div>parker</div>
       </div>
  </li>
  <li id="second" style="display: none;">
        <h2>car</h2>
        <div>Bugatti</div>
     </div>
   </li>
</div>​

CSS：

.active { color: green; }​
4

2 回答 2

4

使用您的代码最简单的解决方法是在点击回调函数上使用检查条件：

http://jsfiddle.net/UuFgt/

if($(this).is('.active')) return false;
于 2012-11-14T17:01:48.110 回答
-1

您不是在“加载”内容，而是在隐藏（使用 ）之后显示它display: none。所以内容没有被“删除”，它被隐藏了。任何时候使用removeClass('active');，都会隐藏相应的元素。toggle()您的代码中的想法是什么？我认为你用错了。要么你应该颠倒两者（第一个使用第二个，第二个使用第一个），或者做不同的事情。

于 2012-11-14T17:06:29.357 回答