jQuery添加Li类活动

Question

需要将类加入li

admin.tpl：

<ul class="nav nav-tabs">
<li><a href="admin.php">{"_MENUINFO"|lang}</a></li>
<li><a href="admin.php?site=ban_add">{"_ADDBAN"|lang}</a></li>
<li><a href="admin.php?site=ban_add_online">{"_ADDBANONLINE"|lang}</a></li>
</ul>

如果example.com/admin.php需要

<li class="active"><a href="admin.php">{"_MENUINFO"|lang}</a></li>
<li><a href="admin.php?site=ban_add">{"_ADDBAN"|lang}</a></li>
<li><a href="admin.php?site=ban_add_online">{"_ADDBANONLINE"|lang}</a></li>

example.com/admin.php？site = ban_add

<li><a href="admin.php">{"_MENUINFO"|lang}</a></li>
<li class="active"><a href="admin.php?site=ban_add">{"_ADDBAN"|lang}</a></li>
<li><a href="admin.php?site=ban_add_online">{"_ADDBANONLINE"|lang}</a></li>

结束等。请帮助！

不起作用

<li class="<?php if ($page=="admin.php") echo "active"?>">

Answer 1

单击链接页面将刷新，然后您可以使用php get获取页面名称并在li上设置活动类：

<?php
if (isset($_GET['site'])) {
    switch ($_GET['site']) {
        case 'ban_add':
            $activeClass1 = 'active';
            break;
        case 'ban_add_online':
            $activeClass2 = 'active';
            break;
        default:
            $activeClass = 'active';
            break;
    }
}
?>
<li class="<?php echo $activeClass; ?>"><a href="admin.php" >{"_MENUINFO"|lang}</a></li>
<li class="<?php echo $activeClass1; ?>"><a href="admin.php?site=ban_add">{"_ADDBAN"|lang}</a></li>
<li class="<?php echo $activeClass2; ?>"><a href="admin.php?site=ban_add_online">{"_ADDBANONLINE"|lang}</a></li>

Answer 2

在文档中，jQuery的文档编写此代码。每当页面加载获得URL并将active类添加到相应的li标签时。

$(function(){
    var pathName = location.pathname;
    $('.nav-tabs a[href="' + pathName + '"]').closest('li').addClass('active');
});

Answer 3

i将动态生成列表，并将类添加到li元素中，其后代a的href与当前的URL匹配。这也使您的标记整洁，更可维护。

使用JavaScript您可以使用.filter()方法：

$(function() {
   $('.nav-tabs a').filter(function() {
      return this.href === document.URL;
   }).closest('li').addClass('active');
})

Answer 4

尝试此 jQuery

首先将id提供给您的ul

<ul class="nav nav-tabs" id="nav_tabs">

然后使用jQuery

$(document).ready(function(){
    $('ul#nav_tabs li a').each(function(index, element) {
        var li = $(element).attr('href');
        $(element).parent().removeClass("active");   
       var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
        if(filename==li)
        {
                $(element).parent().addClass("active"); 
        }
    });
});

您也可以使用 php 为

<?php
$my_url = $_SERVER['REQUEST_URI'];
$page = substr($my_url, strrpos($my_url, '/') + 1)
?>
<ul class="nav nav-tabs" id="nav_tabs">
    <li <?php if($page=="admin.php") echo 'class="active"'; ?>><a href="admin.php">{"_MENUINFO"|lang}</a></li>
    <li <?php if($page=="admin.php?site=ban_add") echo 'class="active"'; ?>><a href="admin.php?site=ban_add">{"_ADDBAN"|lang}</a></li>
    <li <?php if($page=="admin.php?site=ban_add_online") echo 'class="active"'; ?>><a href="admin.php?site=ban_add_online">{"_ADDBANONLINE"|lang}</a></li>
</ul>