如何使用 jQuery 或 JavaScript 根据当前 URL 和 click 事件将类“active”分配给 li

How to assign a class "active" to the li element based on current URL and click event using jQuery or JavaScript

本文关键字：事件 active li 分配 click JavaScript jQuery 何使用 URL      更新时间：2023-09-26

我正在尝试创建一个菜单，每当选择和加载页面时，都会为页面分配一个类"active"。现在，默认情况下，它仅应用于索引页。

我的菜单片段：

<ul class="nav navbar-nav">
     <li class="active"><a href="http://localhost/wp/index.php">Main</a></li>
     <li><a href="http://localhost/wp/news">News</a></li>
     <li><a href="http://localhost/wp/contacts">Contacts</a></li>
</ul>

试试这段代码。它在我这边工作。

<script>
jQuery(document).ready(function() {
    jQuery(".nav.navbar-nav li").click(function(){
        jQuery(".nav.navbar-nav li").removeClass('active');
        jQuery(this).addClass('active');
        })
var loc = window.location.href;
 jQuery(".nav.navbar-nav li").removeClass('active');
    jQuery(".nav.navbar-nav li a").each(function() {
        if (loc.indexOf(jQuery(this).attr("href")) != -1) {
            jQuery(this).closest('li').addClass("active");
        }
    });
});     
</script>
<ul class="nav navbar-nav">
     <li class="active"><a href="http://localhost/wp/index.php">Main</a></li>
     <li><a href="http://localhost/wp/news">News</a></li>
     <li><a href="http://localhost/wp/contacts">Contacts</a></li>
</ul>

我假设如果你使用PHP，你的页面会是这样的。 只需在每个页面中定义一个$active变量即可。

<?php 
//Main.php
 $active = "Main";
?>
<?php 
//news.php
 $active = "News";
?>
<?php 
//Contacts.php
 $active = "Contacts";
?>

那么你的html将是这样的。

<ul class="nav navbar-nav">
     <li class="<?php echo $active=='Main'? 'active' : ''; ?>"><a href="http://localhost/wp/index.php">Main</a></li>
     <li class="<?php echo $active=='News'? 'active' : ''; ?>"><a href="http://localhost/wp/news">News</a></li>
     <li class="<?php echo $active=='Contacts'? 'active' : ''; ?>"><a href="http://localhost/wp/contacts">Contacts</a></li>
</ul>

我认为这会更好：-

$(".navbar-nav").children("a").click(function(){
    $(".navbar-nav").children("li").removeClass("active");
    $(this).parent("li").addClass("active");
 })

如果您可以编辑主题，我希望这会对您有所帮助。

$slug = basename(get_permalink());
<ul class="nav navbar-nav">
         <li class="<?php echo $slug =='Main_page_slug'? 'active' : ''; ?>"><a href="http://localhost/wp/index.php">Main</a></li>
         <li class="<?php echo $slug =='newpageslug'? 'active' : ''; ?>"><a href="http://localhost/wp/news">News</a></li>
         <li class="<?php echo $slug =='congtactPageslug'? 'active' : ''; ?>"><a href="http://localhost/wp/contacts">Contacts</a></li>
    </ul>

可能还有其他方法可以获取当前页面的URL，标题或ID，请查看此处链接

你可以在

PHP中做到这一点。

步骤：

1） 创建菜单的多维数组。

2）键是链接，值是文本。

3） 获取当前页面网址。

4） 使用 basename() 获取 url 的最后一段。

5）这将是您当前的页面变量。如果为空，则将其分配给主页。

6） 遍历menus数组。

7）循环显示菜单li s。

8） 如果当前循环项等于当前页面，则添加类active 否则，不添加任何类。

<?php
function curPageURL() {
 $pageURL = 'http';
 if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
 $pageURL .= "://";
 if ($_SERVER["SERVER_PORT"] != "80") {
  $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
 } else {
  $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
 }
 return $pageURL;
}
$menus = array();
$menus['main'] = 'index.php';
$menus['news'] = 'News';
$menus['contacts'] = 'Contacts';
$currentURL = curPageURL();// Get Current url here.
$currentPage = basename($currentURL);
$currentPage = empty($currentPage) ? 'main' : $currentPage;
if (! empty($menus)) {
?>
<ul class="nav navbar-nav">
<?php
    foreach ($menus as $lnk => $txt) {
        $activeCls = ($lnk == $currentPage) ? 'active' : '';
?>
     <li class="<?php echo $activeCls;?>"><a href="http://localhost/wp/<?php echo $lnk;?>"><?php echo $txt;?></a></li>
    <?php
    }
?>
</ul>
<?php
}
?>

我想你正在寻找这个。经过试验和测试，，请参阅演示和更新的演示

    $(".navbar-nav").find("a").click(function(){
               $(".navbar-nav").find("li").removeClass("active");
                $(this).parent("li").addClass("active");


        })
        $( window ).load(function() {

         var which_page=window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
                    $(".navbar-nav").find("a").each(function(){
                    if($(this).attr("href") == which_page)
                    {
                     $(this).addClass("active");
                    }
                   })

        });

更新的演示

试试这个jQuery：-

$("div.navbar-nav").on('click', 'li', function() {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
});

如果要在基于锚标记 url 的页面加载后保留最后选择的值，则还要添加此行。

// get the actual pathname:
var path = location.pathname;
// filter menu items to find one that has anchor tag with matching href:
$('.navbar-nav li').filter(function(){
    return '/' + $('a', this).attr('href') === path;
// add class active to the item:
}).addClass('active');

或

$(document).ready(function () {
        var pageTitle = window.location.pathname.replace(/^.*'/([^/]*)/, "$1");
        $('.navbar-nav a').each(function () {
            if ($(this).attr('href').toLowerCase() == pageTitle.toLocaleLowerCase())
                $(this).parent().addClass('active');
        });
  });

希望它能帮助你:)

相关文章：