Question

我只想在使用php打开页面时，在我的导航链接中添加一个名为“active”的css类。

在我的网站中，内容已分解为各个组件。这些组件使用一个索引文件进行分离，组织和重新组合在一起。（网站引导文件）其实我正在使用php模块化这个网站。

我的导航类似于此代码 -

...

<li>
    <a href="index.php?p=dashboard">Dashboard</a>
</li>
<li>
    <a href="index.php?p=page-two">Page Two</a>
</li>
<li>
    <a href="index.php?p=page-three">Page Page Three</a>
</li>

...

这就是我的index.php的样子 -

// Validate what page to show:
if (isset($_GET['p'])) {
    $p = $_GET['p'];
} elseif (isset($_POST['p'])) { // Forms
    $p = $_POST['p'];
} else {
    $p = NULL;
}

// Determine what page to display:
switch ($p) {

    case 'dashboard':
        $page = 'dashboard.inc.php';
        $page_title = 'Control Panel';
        break;

    case 'page-three':
        $page = 'page-three.inc.php';
        $page_title = 'Page Three';
        break;

    case 'page-two':
        $page = 'page-two.inc.php';
        $page_title = 'Page Two';
        break;

    // Default is to include the main page.
    default:
        $page = 'login.inc.php';
                $page_title = 'Control Panel Login';
        break;

} // End of main switch.

// Make sure the file exists:
if (!file_exists('./modules/' . $page)) {
    $page = 'login.inc.php';
    $page_title = 'Control Panel Login';
}

include('./includes/header.html');

include('./modules/' . $page);

include('./includes/footer.html');

我不知道如何动态地将active css类添加到我的链接中。希望有人可以帮助我。

谢谢。

Answer 1

使用$_SERVER['PHP_SELF']将当前文件与要加载的页面进行比较。

如果他们是平等的：

case 'dashboard':
  $page = 'dashboard.inc.php';
  $page_title = 'Control Panel';
  $class == ($page == $p) ? 'active' : '';
break;

并将此类添加到HTML。

<li class="<?php echo $class;?>">
...

Answer 2

如果您对JS / Jquery解决方案没问题，那么

HTML CODE：

<ul class="menu">
    <li>
        <a href="index.php?p=dashboard">Dashboard</a>
    </li>
    <li>
        <a href="index.php?p=page-two">Page Two</a>
    </li>
    <li>
        <a href="index.php?p=page-three">Page Page Three</a>
    </li>
</ul>

JS代码：

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

$(document).ready(function(){
    var PageName = getParameterByName('p');
    $("li a[href*='"+PageName+"']").addClass("active");
});

工作示例在这里 http://jsfiddle.net/naveenkumarpg/f16yqrpx/3/

突出显示模块化网站中当前页面的链接

2 个答案: