Bootstrap=ウェブサイトで、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はすべて適切にリンクされています。サイトにsubnavメニューのようにアクティブに切り替えるために、jQueryを追加する必要がありますか、それとも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 bootstrapナビゲーションリストを処理するための私のコードです:
$(document).ready(function () {
$('ul.nav > li').click(function (e) {
e.preventDefault();
$('ul.nav > li').removeClass('active');
$(this).addClass('active');
});
});
開始するアクティブなクラスがリンクにないことを確認してください。
ナビゲーションリンクが別の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やタブレットなどでクリックイベントを簡単にトリガーできるため、イベントリスナを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アマチュアです)。
ナビゲーションバーのボタンはそれぞれ新しいページに移動します。したがって、各ページのhtmlで、このようなものを下部に配置します。
<script type="text/javascript">
$(document).ready( function(){
$("#aboutButton").removeClass("active");
});
$(document).ready( function(){
$("#dashboardButton").addClass("active");
});
</script>
それはすぐに私のために働いた。
追伸受け入れられた答えを試してみましたが、実際に「切り替える」には現在アクティブなボタンから「アクティブな」クラスを削除する必要があるため、運がありませんでした。私はそれが可能であると確信していますが、繰り返しますが、私はこのものにかなり新しいです。
テスト済みで、正常に動作します。
$('.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は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();
});
これはかなり古くなっており、答えが集まっていますが、私は一番上の答えを取り、改善しました。一番上の答えは、ページにある場合にのみ機能します。これは、sibling
要素からアクティブな要素を削除し、クリックした要素に追加するようにスコープを設定します。
また、クラスnav-toggle
を追加して、すでにbootstrap jsが付加されているものに干渉しないようにします。
$('.nav.nav-toggle li').click(function(e) {
var $this = $(this);
$this.siblings().removeClass('active');
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});