jquery 中添加/删除类的问题

发布于 2024-10-10 06:58:20 字数 1251 浏览 2 评论 0原文

我正在尝试创建一个类似于选项卡但带有垂直按钮的菜单导航。当我启动页面时，第一个 li 类被删除，当我单击任何其他链接时，除了显示我的内容 div 之外，没有任何事情发生

。链接应始终在页面开始时处于活动状态。

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

    var tabContainers = $('div.pages > div');

    $('div.sidemenu ul.list a').click(function () {
        tabContainers.hide().filter(this.hash).show();

        $('div.sidemenu ul.list li').removeClass('active');
        $(this).addClass('active');

        return false;
    }).filter(':first').click();


});
</script>
<div class="sidemenu">
  <ul class="list"> 
 <li class="active"><a href="#first">Login & Password</a></li>
 <li><a href="#second">Contact Details</a></li>
 <li><a href="#third">Company & Branch Details</a></li>
 <li><a href="#forth">Address Details</a></li>
  </ul>
</div>

<div class="pages">
  <div id="first">
    CONTENT 1
  </div>
  <div id="second">
    CONTENT 2
  </div>
  <div id="third">
    CONTENT 3
  </div>
  <div id="forth">
    CONTENT 4
  </div>
</div>

不知道我在这里错过了什么..也许是因为我刚刚醒来，还在喝第一杯咖啡..;)

原文

I am trying to create a menu navigation sort of like tab's but with vertical buttons.. When I start the page, the first li class is removed and when I click any other link nothign happens other then my content div's being shown..

The first link should always be active on page start.

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

    var tabContainers = $('div.pages > div');

    $('div.sidemenu ul.list a').click(function () {
        tabContainers.hide().filter(this.hash).show();

        $('div.sidemenu ul.list li').removeClass('active');
        $(this).addClass('active');

        return false;
    }).filter(':first').click();


});
</script>
<div class="sidemenu">
  <ul class="list"> 
 <li class="active"><a href="#first">Login & Password</a></li>
 <li><a href="#second">Contact Details</a></li>
 <li><a href="#third">Company & Branch Details</a></li>
 <li><a href="#forth">Address Details</a></li>
  </ul>
</div>

<div class="pages">
  <div id="first">
    CONTENT 1
  </div>
  <div id="second">
    CONTENT 2
  </div>
  <div id="third">
    CONTENT 3
  </div>
  <div id="forth">
    CONTENT 4
  </div>
</div>

Not sure what I am missing here.. Maybe its cuase I just woke up and still on my first cup of coffee.. ;)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

肩上的翅膀 2024-10-17 06:58:20

您将该类添加到元素中，但将其从其父

元素中删除。

$(this).addClass('active');  // "this" is the <a> that received the event

   // This removes "active" from the <li>
$('div.sidemenu ul.list li').removeClass('active');

看起来您打算让

拥有该类。所以你应该这样做：

$(this).parent().addClass('active');

或者如果你不介意我在其中混合一点 DOM API：

$(this.parentNode).addClass('active');

现在去补充一下！ ;o)

You're adding the class to the <a> element, but removing it from its parent <li> element.

$(this).addClass('active');  // "this" is the <a> that received the event

   // This removes "active" from the <li>
$('div.sidemenu ul.list li').removeClass('active');

Looks like you intend for the <li> to have the class. So you'd do this instead: