Jquery添加li类活动

时间:2014-01-31 10:20:14

标签: javascript php jquery html css

需要向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>

如果exam​​ple.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"?>">

4 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

在jquery的文档准备中编写此代码。每当页面加载获取url并将类激活添加到相应的li标记。

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

答案 2 :(得分:1)

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

使用JavaScript,您可以使用href方法:

.filter()

答案 3 :(得分:0)

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