ブートストラップCSSアクティブナビゲーション

StackOverflow https://stackoverflow.com/questions/9301507

質問

BootstrapのWebサイトでは、SubNavはセクションと一致し、背景の色を変更したり、セクションにスクロールしたりします。背景の色とすべてをすべて使用せずに独自のメニューを作成したかったのですが、CSSが似ているように変更しましたが、下にスクロールしたり、メニュー項目をクリックすると、アクティブクラスが切り替わりません。私が何をしているのかわからない。

HTML：

<ul class="menu">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

CSS：

.menu {list-style:none;}
.menu > li {float: left;}
.menu > li > a {color:#555;float: none;padding: 10px 16px 11px;display: block;}
.menu > li > a:hover {color: #F95700;}
.menu .active > a, .menu .active > a:hover {color:#F95700;}

ファイルを確認しました。 jQuery、bootstrap.js、bootstrap.cssはすべて適切にリンクされています。追加のjQueryを追加する必要がありますか、それともサイトのサブNAVメニューのようにActiveを切り替えるためにいくつかのCSSがありませんか？

役に立ちましたか？

解決

クラスを切り替えるには、JavaScriptを実行する必要があります。

jquery：

$('.menu li a').click(function(e) {
  var $this = $(this);
  if (!$this.hasClass('active')) {
    $this.addClass('active');
  }
  e.preventDefault();
});

JavaScript：

var menu = document.querySelector('.menu');
var anchors = menu.getElementsByTagName('a');

for (var i = 0; i < anchors.length; i += 1) {
  anchors[i].addEventListener('click', function() { clickHandler(anchors[i]) }, false);
}

function clickHandler(anchor) {
  var hasClass = anchor.getAttribute('class');
  if (hasClass !== 'active') {
    anchor.setAttribute('class', 'active');
  }
}

これが役立つことを願っています。

他のヒント

あなたも他の人をクリアしなければならないので、これは私が終わらせたものです。

$('.navbar li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});

これは、Twitterブートストラップナビゲーションリストを処理するための私のコードです。

$(document).ready(function () {
        $('ul.nav > li').click(function (e) {
            e.preventDefault();
            $('ul.nav > li').removeClass('active');
            $(this).addClass('active');                
        });            
    });

NAVがどのように構造化されているかに応じて、2つの1ライナーを使用します

リンクのどれもアクティブなクラスを開始していないことを確認してください。

実際のリンク

NAVリンクが個別のHTMLファイルにある場合（Express.jsのレイアウトテンプレートなど）、これを行うことができます。

$('ul.nav > li > a[href="' + document.location.pathname + '"]').parent().addClass('active');

ハッシュリンク

それらがハッシュである場合、これを行います：

$('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); });

ハッシュクリックでスクロールしたくない場合は、falseを返します。

 $('ul.nav > li > a[href="' + document.location.hash + '"]').click(function(){  $('ul.nav > li').removeClass('active'); $(this).parent().addClass('active'); return false; });

他の回答のいくつかを見ると、サイドメニューがクリックされたときにWebページをそのセクションまで下にスクロールしたい場合は、 preventDefault.

さらに、現在のアクティブクラスを削除し、すべてのLIを検索しない新しいクラスを追加するだけです。また、選択したリストアイテムが既にアクティブである場合、コードが何もしないようにしたいのですが、同じアクティブなクラスを不必要に追加して削除することはありません。最後に、iPhoneやTabletなどでクリックイベントをトリガーするのが簡単な時期があるため、イベントリスナーをliではなくA要素に配置する必要があります。 .delegate したがって、DOM対応イベントを待つ必要はありません。結局、私はこのようなことをします（私はあなたがjqueryをプリロードしたと思います）：

$('body').delegate('.menu li a', 'click', function(){
    var $thisLi = $(this).parents('li:first');
    var $ul = $thisLi.parents('ul:first');
    if (!$thisLi.hasClass('active')){
        $ul.find('li.active').removeClass('active');
        $thisLi.addClass('active');
    }
});

このコードをお勧めします：

 <script>
      var curentFile = window.location.pathname.split("/").pop();
      if (curentFile == "") curentFile = "Default.aspx";
      $('ul.nav > li > a[href="' + curentFile + '"]').parent().addClass('active');
 </script>

それは魅力のような仕事です。

私はこれを解決するために何か違うことをしました（FYI、私は完全なHTML/CSS/JSアマチュアです）。

Navbarボタンのそれぞれは、新しいページに移動します。したがって、各ページのHTMLで、私はこのようなものを下部に置きます：

<script type="text/javascript">
    $(document).ready( function(){
       $("#aboutButton").removeClass("active");
    });

    $(document).ready( function(){
       $("#dashboardButton").addClass("active");
    });
</script>

それは私のためにすぐに機能しました。

PS私は受け入れられた答えを試しましたが、現在アクティブなボタンから「アクティブな」クラスを削除して真に「スイッチ」する必要があるため、運がありませんでした。私はそれが可能だと確信していますが、繰り返しますが、私はこのようなものにかなり新しいです。

テストされ、正常に動作します。

    $('.navbar li').click(function(e) {
        $('.navbar li.active').removeClass('active');
        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }

    });

  <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            . . . 
  </ul>

JSPを使用してこれに問題がある人は、パッケージを見てください。

document.location.pathnameは私に与えられました：/packageName/index.jsp

しかし、私のnavbarの私のhrefはJust index.jspと呼ばれていました

Konsumerの答えを編集するには：

$(document).ready(function() {
   var string = document.location.pathname.replace('/Package Name/','');
   $('ul.nav > li > a[href="' + string + '"]').parent().addClass('active');
} );

上記のトップの回答のいくつかを試しましたが、「.Active」クラスで機能しますが、リンクはうまく機能していませんが、現在のページにはまだ残っています。それから私はこれを試しました：

var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');

ここで見つけました： Twitter Bootstrap Liにアクティブクラスを追加します

<ul class="main-menu">
    <li><a href="~/Cases/Index"><i class="fa fa-font fa-fw"></i><span class="text">Audit Case</span></a></li>
    <li><a href="~/Cases/Auditplan"><i class="fa fa-font fa-fw"></i><span class="text">Audit Plan</span></a></li>
    <li><a href="~/Cases/Auditreport"><i class="fa fa-font fa-fw"></i><span class="text">Audit Report</span></a></li>
    <li><a href="~/Cases/Company"><i class="fa fa-font fa-fw"></i><span class="text">Company Details</span></a></li>
</ul>

<script>
$(function(){
  $('.main-menu li > a[href="' + document.location.pathname + '"]').parent().addClass('active').siblings().removeClass('active');
})
</script>

JavaScriptに追加してください：

$(".menu li").click(function(e) {
    $(".menu li").removeClass("active");
    $(this).addClass("active");
    e.preventDefault();
});

これはかなり古くなり、答えでクラスター化されていますが、私は一番の答えを取り、それを改善しました。一番の回答は、ページに1つある場合にのみ機能します。これにより、アクティブから除去するように範囲があります sibling 要素とそれをクリックしたものに追加します。

クラスも追加しました nav-toggle そのため、すでにブートストラップJSが添付されているものに干渉しないようにします。

$('.nav.nav-toggle li').click(function(e) {
  var $this = $(this);
  $this.siblings().removeClass('active');
  if (!$this.hasClass('active')) {
      $this.addClass('active');
  }
  e.preventDefault();
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top