Bootstrap provides a rich front-end framework, providing great convenience for programmers who are not proficient in CSS. Some time ago, when using the menu control in Bootstrap, the active class cannot be automatically added after clicking the link, that is, it cannot be automatically activated. It is necessary to do the following processing appropriately before it is OK.
Having said nonsense, just upload the code:
<ul class="tabbable faq-tabbable">
<li class="active"><a href="@(" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Index", "MyContract", new { area = "MyData" })">My contract</a></li>
<li><a href="@(" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Index", "MyCashout", new { area = "MyData" })">My request</a></li>
<li><a href="@(" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Index", "MyReceive", new { area = "MyData" })">My entry</a></li>
<li><a href="@(" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" Index", "MyCashback", new { area = "MyData" })">My payment</a></li>
</ul>
This is a typical navigation menu, and now add the following script to handle:
$(function () {
$(".faq-tabbable").find("li").each(function () {
var a = $(this).find("a:first")[0];
if ($(a).attr("href") === ) {
$(this).addClass("active");
} else {
$(this).removeClass("active");
}
});
})
The principle is very simple, which is to find all the li tags, judge the link address of their a tag, and how to match the address of the current browser, it is considered that it is the menu that should be activated at the moment, and add an active class, otherwise it will be cancelled.
That's it, just ~~
The above method of handling the inability to automatically add active after clicking the Bootstrap navigation menu is all the content I share with you. I hope you can give you a reference and I hope you can support me more.