jquery添加li类活动答案

【问题标题】：Jquery add li class activejquery添加li类活动
【发布时间】：2014-02-23 23:59:39
【问题描述】：

需要给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"?>">

【问题讨论】：

完整的网址是什么？如果它与链接上的 href 匹配，您可以检查当前的 href。但是您可能需要在某个点拆分当前的 href。不知道在哪里，除非你提供这个，或者至少是 admin.php 之前的字符串部分
@user3008011 你看到我的回答了吗

标签： javascript php jquery html css

【解决方案1】：

试试这个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>

【讨论】：

非常感谢，JQUERY 代码工作！！

【解决方案2】：

我会在服务器端动态生成列表并向li 元素添加一个类，它的后代a 的href 与当前URL 匹配。这也使您的标记更整洁且更易于维护。

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

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

【讨论】：

如何连接这个脚本？
@user3239481 通过使用script 标签？
我把这个函数粘贴到 js 文件末尾写到

【解决方案3】：

在 jquery 准备好的文档中写下这段代码。每当页面加载时获取 url 并将 class active 添加到相应的 li 标签。

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

【讨论】：

能写出完整的代码吗？我没有脚本技巧

【解决方案4】：

点击链接页面会刷新，然后你可以使用 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>

【讨论】：

你试过在 admin.php 中添加脚本并用我的代码替换你的 li 代码吗？
链接很多，我需要一个简单的解决方案