bootstrap use jquery？]の別のリンクをクリックしながらアクティブクラスを変更する方法
サイドバーとしてhtmlがあり、Bootstrapを使用します。
<ul class="nav nav-list">
<li class="active"><a href="/">Link 1</a></li>
<li><a href="/link2">Link 2</a></li>
<li><a href="/link3">Link 3</a></li>
</ul>
何かしたい：
リンク3などのリンクをclickすると、page contentはリンク3のコンテンツに変更され、リンク3はクラスactiveを持ち、リンク1のアクティブなclssを削除します。
これはjQueryで実装できると思うので、SOで次のような多くの質問を検索しました。
このスクリプトを使用します。
$(document).ready(function () {
$('.nav li').click(function(e) {
$('.nav li').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
//e.preventDefault();
});
});
しかし、それらのほとんどはpreventDefaultを使用します。これにより、継続的なアクションが妨げられます。したがって、リンク3のページコンテンツに変更することはできません。
PreventDefaultステートメントを削除すると、ページがリンク3のコンテンツを読み込むときに、アクティブなクラスがリンク1に戻ります。
この問題を解決する方法はありますか？
間違った要素をクリックしてバインドしている場合、aにバインドする必要があります。
liでデフォルトイベントが発生するのを防ぎますが、liにはデフォルトの動作がありません。aにはあります。
これを試して：
$(document).ready(function () {
$('.nav li a').click(function(e) {
$('.nav li.active').removeClass('active');
var $parent = $(this).parent();
$parent.addClass('active');
e.preventDefault();
});
});
私はbootstrapナビゲーションを使用しています
これは、アクティブなメインドロップダウンとアクティブな子を含む私のために仕事をしました
$(document).ready(function () {
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').parent().parent().addClass('active');
});
クラスを変更する場合and同じ関数内でコンテンツをロードしてください。
$(document).ready(function(){
$('.nav li').click(function(event){
//remove all pre-existing active classes
$('.active').removeClass('active');
//add the active class to the link we clicked
$(this).addClass('active');
//Load the content
//e.g.
//load the page that the link was pointing to
//$('#content').load($(this).find(a).attr('href'));
event.preventDefault();
});
});
<script type="text/javascript">
$(document).ready(function(){
$('.nav li').click(function(){
$(this).addClass('active');
$(this).siblings().removeClass('active');
});
});
以前にも同じ問題がありました。ここでこの答えを試してください、それは私のサイトで動作します。
$(function(){
var current_page_URL = location.href;
$( "a" ).each(function() {
if ($(this).attr("href") !== "#") {
var target_URL = $(this).prop("href");
if (target_URL == current_page_URL) {
$('nav a').parents('li, ul').removeClass('active');
$(this).parent('li').addClass('active');
return false;
}
}
});
});
ソース：オリジナルの投稿はこちら アクティブクラスをTwitterブートストラップからnavメニューに設定する方法
これはトリックを行います
$(document).ready(function () {
var url = window.location;
var element = $('ul.nav a').filter(function() {
return this.href == url || url.href.indexOf(this.href) == 0;
}).addClass('active').parent().parent().addClass('in').parent();
if (element.is('li')) {
element.addClass('active');
}
});
私の場合のHTMLコード
<ul class="navs">
<li id="tab1"><a href="index-2.html">home</a></li>
<li id="tab2"><a href="about.html">about</a></li>
<li id="tab3"><a href="project-02.html">Products</a></li>
<li id="tab4"><a href="contact.html">contact</a></li>
</ul>
そしてjsコードは
$('.navs li a').click(function (e) {
var $parent = $(this).parent();
document.cookie = eraseCookie("tab");
document.cookie = createCookie("tab", $parent.attr('id'),0);
});
$().ready(function () {
var $activeTab = readCookie("tab");
if (!$activeTab =="") {
$('#tab1').removeClass('ActiveTab');
}
// alert($activeTab.toString());
$('#'+$activeTab).addClass('active');
});
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}
Javaのようなサーバーサイドコードを使用している場合、アクティブなタブ名を返す必要があり、戻りページには無効な（アクティブなクラスを削除する）タブを返す機能があります）.
これには、各タブにIDまたは名前を追加する必要があります。もう少し作業:)
$(".nav li").click(function() {
if ($(".nav li").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
これが私が思いついたものです。 「li」要素にアクティブなクラスがあるかどうかをチェックし、ない場合はクラスの削除部分をスキップします。私はパーティーに少し遅れていますが、これが役立つことを願っています。 :)
あるページから別のページにポストバックデータを保存するためにCookieを使用することができます。私はあなたに私の答えを提案しています（これも必要だったので、これは完全に機能しています）。
最初に、次のような有効なID名にliタグを付けます
<ul class="nav nav-list">
<li id="tab1" class="active"><a href="/">Link 1</a></li>
<li id="tab2"><a href="/link2">Link 2</a></li>
<li id="tab3"><a href="/link3">Link 3</a></li>
</ul>その後、このスクリプトをコピーして貼り付けます。 Cookieの読み取り、削除、および作成用のJavaScriptを作成したためです。
$('.nav li a').click(function (e) {
var $parent = $(this).parent();
document.cookie = eraseCookie("tab");
document.cookie = createCookie("tab", $parent.attr('id'),0);
});
$().ready(function () {
var $activeTab = readCookie("tab");
if (!$activeTab =="") {
$('#tab1').removeClass('ActiveTab');
}
// alert($activeTab.toString());
$('#'+$activeTab).addClass('active');
});
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}注：要件に応じて実装してください。私はこのスクリプトを実装に従って作成しましたが、うまく機能しています。