39

Twitter Bootstrapナビゲーションバーのアクティブリンクを太字にする標準的な方法は何ですか？リンクが「アクティブ」クラスを取得することによってアクティブな外観を取得することは明らかです。たとえば、Home以下のリンクがアクティブです。ナビゲーションバーのリンクをクリックしたら、jQueryを使用してli要素からすべてのクラスを削除してから、IDを付けたリンクにクラスを追加する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>
4

9 に答える 9

41

ユーザーがリンクをクリックして別のページをリクエストする前ではなく、(ページが読み込まれるときの) リクエスト応答の一部としてアクティブなクラスを設定する必要があります。

最初に、どれをアクティブに設定するかを決定し、アクティブなクラスを に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"';
}

?>
于 2012-08-05T05:47:54.373 に答える
3

ページの下部に次のスクリプトを追加します。

<script>
    $(document).ready(function() {
        var url = this.location.pathname;
        var filename = url.substring(url.lastIndexOf('/')+1);
        $('a[href="' + filename + '"]').parent().addClass('active');
    });
</script>
于 2016-02-14T08:36:14.547 に答える
2

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" );

ありがと！！

于 2013-03-03T08:07:30.300 に答える
0

以下のコードを「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>
于 2015-06-15T10:10:43.693 に答える