web-dev-qa-db-ja.com

Twitter Bootstrap navbarリンクをアクティブにする

Twitterでアクティブリンクを太字にする標準的な方法は何ですか？Bootstrap navbarを太字にしますか？リンクが「アクティブ」クラスを取得することでアクティブな外観を取得することは明らかです。たとえば、Home link is active。navbarのリンクをクリックすると、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>

[〜＃〜] edit [〜＃〜]：含めました

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

リンクの後。リンクをクリックするとアラートが表示されますが、「アクティブな」クラスはリンクに追加されません。

これが私のnavbar 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>
phpjquerytwitter-bootstrap
39
Rose Perrone

activeクラスを、ユーザーがリンクをクリックする前ではなく、リクエスト応答の一部として（ページの読み込み時に）設定することを確認する必要があります。別のページをリクエストします。

最初に、どのnavlinkをアクティブとして設定する必要があるかを判断し、activeクラスを<li>に追加する必要があります。コードは次のようになります

askerによるテスト：

PHPファイル内のHTML

リンク先リクエストURIを渡す<li>マークアップ内で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関数simpleは、渡されたリクエストuriを比較する必要があり、レンダリングされている現在のページと一致する場合、出力activeクラス

<?php 

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

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

?>
40
Chris Moutray

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

このチュートリアルには、この「問題」に対する優れた究極のソリューションがあります。私は少し前にそれを扱っていて、私にとっても素晴らしい仕事をしていました、カスタマイズ可能

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

サーバー側を処理したくない場合、および「/page.php」のようにすべてのhrefが単純な場合は、次を呼び出すことができます。

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

ページがロードされた後。

10
vtk13

あなたが試すことができます：

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

ただし、navクラスを持つページには複数の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;
}
_
9
Chris Clower

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

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

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

ありがと！！

2
delor34n

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リンクには現在のページであることを示すデフォルトのスタイルが設定されます。

1
Luca Mori Polpettini

ページ名に$ 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>
0
GoodViber

以下のコードを「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>
0
JBarros