php - 激活 Twitter Bootstrap 导航栏链接

Question

使 Twitter Bootstrap 导航栏中的活动链接加粗的标准方法是什么？很明显，链接通过获得“活动”类来获得活动外观。例如，下面的Home链接是活动的。当我单击导航栏中的任何链接时，是否应该使用 jQuery 从li元素中删除所有类，然后将该active类添加到我已经标识的链接中？

<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

编辑：我包括

<script type="text/javascript">
$('.nav li a').on('click', function() {
    alert('clicked');
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active');
});
</script>

在链接之后。单击链接时会出现警报，但未将“活动”类添加到链接中。

这是我所有的导航栏 HTML：

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">AuctionBase</a>
            <div class="nav-collapse">
                    <ul class="nav">
                        <li><a href="home.php">Search</a></li>
                        <li><a href="about.php">About</a></li>
                    </ul>
            </div>
        </div>
    </div>
</div>

score 41 · Accepted Answer

您需要确保将活动类设置为请求响应的一部分（在页面加载时），而不是在用户单击链接以请求不同页面之前。

首先，您需要确定哪些navlink应该设置为活动，然后将活动类添加到<li>. 代码看起来像这样

由询问者测试：

php文件中的HTML

<li>在传递链接目标请求 uri的标记中内联调用 php 函数

<ul class="nav">
    <li <?=echoActiveClassIfRequestMatches("home")?>>
        <a href="home.php">Search</a></li>
    <li <?=echoActiveClassIfRequestMatches("about")?>>
        <a href="about.php">About</a></li>
</ul>

PHP 函数

简单的 php 函数需要比较传入的请求 uri，如果它匹配当前正在呈现的页面，则输出活动类

<?php 

function echoActiveClassIfRequestMatches($requestUri)
{
    $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

    if ($current_file_name == $requestUri)
        echo 'class="active"';
}

?>

score 29 · Accepted Answer

http://totalprogus.blogspot.sk/2013/12/bootstrap-add-active-class-to-li.html

本教程为这个“问题”提供了一个很好的终极解决方案。不久前我正在处理它并且对我来说工作得很好，也可以定制

$(document).ready(function() {
    $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
});

score 10 · Accepted Answer

如果您不想处理服务器端并且在所有href都很简单的情况下，例如'/page.php'，您可以调用

$('.your-nav-container').find('a[href="' + location.pathname + '"]').parents('li').addClass('active');

页面加载后。

score 9 · Accepted Answer

你可以试试：

$('.nav li a').on('click', function() {
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active').css('font-weight', 'bold');
});

不过最好给你nav一个id属性，因为你可能在一个页面上有多个导航nav类。

$('#main-nav li a').on('click', function() {
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active').css('font-weight', 'bold');
});

或者，.css('font-weight', 'bold')您可以将其放在样式表中，而不是使用：

.active {
    font-weight: bold;
}

score 3 · Accepted Answer

在页面底部添加以下脚本：

<script>
    $(document).ready(function() {
        var url = this.location.pathname;
        var filename = url.substring(url.lastIndexOf('/')+1);
        $('a[href="' + filename + '"]').parent().addClass('active');
    });
</script>

score 2 · Accepted Answer

Chris Moutray 您的回答对我的软件开发帮助很大（我正在使用 ZendFramework）。我写了这个视图助手：

<?php

class Zend_View_Helper_ActiveOrNot {

    function activeOrNot ( $requestUri ) { 

        $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

        if ($current_file_name == $requestUri)

            echo 'class="active"';

    }   

}

在这种情况下，我在视图中调用这个助手：

<?php $this -> activeOrNot ( "public" );

谢谢你！！

score 1 · Accepted Answer

你可以用 CSS 解决它。

在每个页面的正文中添加一个类：

<body class="home">

或者，如果您在联系页面上：

<body class="contact">

然后在创建样式时考虑到这一点：

ul li:hover, body.home a.home, body.contact a.contact { background-color: #000; } 
ul li:hover a, body.home li.home a, body.contact li.contact a { color: #fff; }

最后，将类名应用于您的列表项：

<ul>
  <li class="home"><a href="index.php">Home</a></li>
  <li class="contact"><a href="contact.php">Contact Us</a></li>
  <li class="about"><a href="about.php">About Us</a></li>
</ul>

这一点，每当您在 body.home 页面上时，您的 li.home 链接将具有默认样式，表明它是当前页面。

score 0 · Accepted Answer

如果您将 $pageTitle 分配给页面名称，则可以在没有 javascript 的情况下执行此操作

<ul class="nav navbar-nav">

      <li <?php if ($pageTitle == "Website Development") {echo 'class="active"';} ?>>
      <a href="website-development.php">
       Web Development
      </a>
      </li>...</ul>

score 0 · Accepted Answer

只需将以下代码放入“head”部分。

<script type="text/javascript">
$(document).ready(function () {
$("li a[href='" + location.href.substring(location.href.lastIndexOf("/") + 1, 255) + "']").addClass("active");
});
</script>

显然不要忘记您之前对 jquery.js 的调用。

和你的：

<style>
.active{something...}
</style>

php - 激活 Twitter Bootstrap 导航栏链接

9 回答 9

Related

Reference