Question

我想在导航链接中添加active类，具体取决于我在哪个页面。

这是我的导航条形码。

<div id="navigation">
  <ul class="nav">
    <li><a href="index.php">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Members</a></li>
    <li><a href="#">About</a></li>
  </ul>
</div>

Answer 1

以下是在PHP中完成的工作。

<?php
    $menu = array(
        array(
            'href' => 'index.php',
            'text' => 'Index',
        ),
        array(
            'href' => 'test.php',
            'text' => 'Test',
        ),
    );
?>
<nav>
    <ul class="menu">
        <?php
            foreach ($menu as $link) {
                $item='<li>';
                if (substr($_SERVER['REQUEST_URI'], 1) == $link['href']) {
                    $item.='<a href="'.$link['href'].'" class="active">'.$link['text'].'</a>';
                } else {
                    $item.='<a href="'.$link['href'].'">'.$link['text'].'</a>';
                }
                $item.='</li>';
                print $item;
            }
        ?>
    </ul>
</nav>

就像你可以看到我使用了一个数组而不是一些简单的HTML，我建议你尽可能多地做同样的事情。这使您的代码更具“动态性”并具有许多好处。

以下是在JavaScript中完成的方法

<nav>
    <ul class="menu">
        <li><a href="index.php">Index</a></li>
        <li><a href="test.php">Test</a></li>
    </ul>
</nav>
<script type="text/javascript">
    var menu = document.querySelectorAll('.menu li a');
    for (var i = menu.length - 1; i >= 0; i--) {
        if (menu[i].href==document.URL) {
            menu[i].setAttribute("class", "active");
        }
    };
</script>

The jsfiddle

不要忘记，jQuery这样做..

<nav>
    <ul class="menu">
        <li><a href="index.php">Index</a></li>
        <li><a href="test.php">Test</a></li>
    </ul>
</nav>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $('.menu li a').each(function() {
        if ($(this).attr('href')==location.pathname.substr(1)){
            $(this).addClass('active');
        }
    });
</script>

The jsfiddle

Answer 2

您可以使用CSS样式来执行此操作。

css文件

#navigation li a.current{
   color: #ffffff;
   background:#000000;
}

html文件

<div id="navigation">
            <ul class="nav">

                <li><a class="current" href="index.php">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Members</a></li>
                <li><a href="#">About</a></li>

            </ul>
</div>

Answer 3

使用jQuery解决此问题

$(document).ready(function() {
            $('.nav li a').on('click', function(event) {
                $('.nav li a').removeClass('active').removeAttr('class');
                $(this).addClass('active');
            });
        });

Answer 4

如果您想用jQuery来做，也可以这样做。就是这样。

HTML

<div id="navigation">
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="blog.php">Blog</a></li>
        <li><a href="members.php">Members</a></li>
        <li><a href="about.php">About</a></li>
    </ul>
</div>

JS

$(function () {
    // Get the last item in the path (e.g. index.php)
    let url = window.location.pathname.split('/').pop();

    // Add active nav class based on url
    $("#navigation ul li a").each(function () {
        if ($(this).attr("href") == url || $(this).attr("href") == '') {
            $(this).closest('li').addClass("active");
        }
    })

    // Add the active class into Home if user omit index.php from url
    if (url == '') {
        $("#navigation ul li").eq(0).addClass("active");
    }
});

添加“活跃”＆＃39; class to navigation links de

4 个答案: