Question

我正在搜索这个，但只找到基于ul列表的解决方案。

我有这段代码：

<div class='nav'>
  <a class='nav-link nav-01' id="tab01" href='#scene-1'></a>
  <a class='nav-link nav-02' id="tab02" href='#scene-2'></a>
  <a class='nav-link nav-03' id="tab03" href='#scene-3'></a>
  <a class='nav-link nav-04' id="tab04" href='#scene-4'></a>
</div>

我想点击它时将类（例如“nav-01”更改为“nav-01-on”）。此外，每个链接的活动类样式都不同（nav-01为nav-01-nav-02-on-nav-02 ...）。

有什么建议吗？提前致谢; - ）

Answer 1

此外，每个链接都有一个不同的活动类样式（nav-01为nav-01-on，导航02为导航-02-on ......）。

由于您正在使用课程，因此您不需要使用其他课程名称来描述“活动”课程。链接的状态。这对CSS课程来说很酷。

由于您的链接已经具有唯一标识符，因此您提供了id属性的形式，您只需要应用通用的“活动状态”即可。类，例如on（可以是你想要的任何东西）。然后在你的CSS中你可以做类似

的事情


    .on {
        /* general rules for elements with the .on class */
    }

    #tab01.on {
        /* specific rules for element #tab01 with the .on class */
    }

我想在点击它时更改课程（例如＆＃34; nav-01＆＃34;到＆＃34; nav-01-on＆＃34;）。

由于您的问题被标记为jquery，我将使用jQuery，因此这里是您想要的天真解决方案。我相信你可以改进它。

//We start assuming we have no active link
var $activeLink = null;

//We apply a listener to every element with the class .nav-link, using jQuery
$('.nav-link').click(function() {
    if ($activeLink) {
        $activeLink.removeClass('on');
    } 
    //Store the link we clicked on as the active link. 
    //Notice we are wrapping it with the jQuery function,
    //so $activeLink is a jQuery object
    $activeLink = $(this);
    $activeLink.addClass('on'); 
});

以上是上述内容的一小部分： https://jsfiddle.net/p1tumym9/4/

Answer 2

Working Fiddle to play around with

为了让自己的生活更轻松，您应该做的是在单个active课程之间切换，并在CSS中指定每个链接在active时的外观如何class，而不是创建一堆独特的类（可能难以管理）。

如何在活动链接之间切换：

$('.nav').find('a').click(function(){
  // Remove active class from all links
  $('.nav').find('a').each(function(){
    $(this).removeClass('active');
  });
  // Add active class to current link
  $(this).addClass('active');
});

在CSS中，只需指定给定active类时每个链接的外观：

.nav-01.active {
  /* active styles for nav-01 */
}

.nav-02.active {
  /* active styles for nav-01 */
}

.nav-03.active {
  /* active styles for nav-01 */
}

.nav-04.active {
  /* active styles for nav-01 */
}

设置活动链接（没有ul列表）

2 个答案: