如何使用jQuery或JavaScript根据当前URL和click事件为li元素分配“活动”类

Question

我试图创建一个菜单，在此菜单中，每当选择并加载“活动”类时，该类就会分配给该页面。 现在，默认情况下它仅应用于索引页面。

我的菜单片段：

<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>

Answer 1

试试这个代码。 它在我的工作。

<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>

Answer 2

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

    $(".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");

                    }

                   })



        });

更新的演示

Answer 3

我认为，如果您使用的是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>

Answer 4

我认为这会更好：

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

Answer 5

试试这个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');
        });
  });

希望它能对您有所帮助:)

Answer 6

您可以在PHP中完成。

脚步：

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

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

3）获取当前页面的URL。

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

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

6）循环menus数组。

7）显示菜单li S IN循环。

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
}
?>

Answer 7

我希望这可以对您有所帮助。

$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，请在此处检查链接