0
にアクティブなクラスを追加し、私は次のナビゲーションを持っている：は、ブートストラップ4 V6を使用したメニュー項目
私が選択したメニュー項目をアクティブにするクラスを設定しようとしているが、私がやった何も働いていません。
私が来ていることに最も近いが、このコードを使用することです：
$(document).ready(function() {
$('.navbar ul li').click(function(e) {
$('.navbar ul li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">DCH</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Feline Diabetes</a>
<div class="dropdown-menu bg-inverse navbar-inverse">
<a class="dropdown-item" href="treatment.php">Treatment</a>
<a class="dropdown-item" href="insulin.php">Insulin and Testing</a>
<a class="dropdown-item" href="relatedconditions.php">Related Conditions</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="nutrition.php">Nutrition</a>
</li>
<li class="nav-item">
<a class="nav-link" href="protocol.php">Protocol</a>
</li>
<li class="nav-item">
<a class="nav-link" href="links.php">Links</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://diabeticcathelp.com/forum" target="_blank">Forum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact Us</a>
</li>
</ul>
</div>
</nav>それがクリックされたメニュー項目にアクティブなクラスを変更し、それがページを変更しません。また、サブメニュー項目では機能しませんが、特定の項目がクリックされたかどうかを確認するためには別のコードが必要になると思います。まず、ページ切り替えの問題を回避したいと思います。 e.preventDefault()コールを削除すると、ページは移動しますが、メニュー項目はアクティブに変更されません。
どのように私はこの作品を作るかもしれないかに関するアイデア？
更新。私は、サブメニューを除いてすべての作業をしています。
$(document).ready(function() {
var listItems = $('.navbar ul li');
$.each(listItems, function (key, litem) {
var aElement = $(this).children(litem)[0];
if(aElement == document.URL) {
$(litem).addClass('active');
}
});
});
私が欠けている唯一のものは、サブメニュー項目に追加するアクティブである：私はこのスレッドでの回答のうちの一つから構成されている次のコードを、使用しています。このコードは、.navbar ul li項目の最初の子項目を取得し、比較を行ってアクティブなクラスを追加する必要があるかどうかを確認しています。私が.nav-item .dropdownのクラスを持っているときに.dropdown-menuの子プロセスを実行し、そこにチェックインする必要があることを知っています。私はちょうど方法を理解するために苦労しています。私は本当にJQueryコースを取る必要があります。
さらに編集：李のすべてを
var setSubItemParent = false;
$(document).ready(function() {
var listItems = $('.navbar ul li');
$.each(listItems, function(key, litem) {
iterateLinks(litem);
})
});
function iterateLinks(liItem) {
var divchildren = $(liItem).children('div');
setSubItemParent = false;
/* If there are div children, iterate them */
if (divchildren.length > 0) {
iterateLinks(divchildren[0]);
/* If an item was set and we're in a div, add active to
this element as well. */
if(setSubItemParent) {
$(liItem).addClass('active');
}
}
else {
var achildren = $(liItem).children('a');
/* Run through all a tags and see if they should be active */
if (achildren.length > 0) {
$.each(achildren, function(key, achild) {
if (achild.href == document.URL) {
$(achild).addClass('active');
setSubItemParent = true;
}
});
}
}
}
コードを実行します：
数時間のためにこれで遊んでた後、私は私がやろうとしている何のために機能するソリューションを持っています要素をメニューに表示し、divが見つかるとさらに掘り下げます。おそらくこれは問題の最も堅牢な解決策ではありませんが、うまくいきます。しかし、私はより良い解決策にはオープンしています。