Benutzer-Werkzeuge

Webseiten-Werkzeuge


programmieren:menu:bootstrap

Dies ist eine alte Version des Dokuments!


Bootstrap

letzten gewählten Menüpunkt aktiv anzeigen
aktiven Menüpunkt anders farbig anzeigen

https://www.codeply.com/go/I3EjDb74My

HTML
<div>
	<hr>
		<nav class="container-fluid navbar navbar-expand-sm bg-dark navbar-dark" style="padding-left: 75px; margin-top: -16px;">
			<ul class="navbar-nav">
				<li class="nav-item">
					<a class="nav-link active" style="padding-left: 0px;" href="#">Most Popular</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">News</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Sports</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Science</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Politics</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Economics</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Random</a> 
				</li>
				<li class="nav-item">
					<a class="nav-link " style="padding-left: 480px; color: white; " href="#">Log in</a>
				</li>
			</ul>
		</nav>
	</div>
JS
$('.navbar-nav .nav-link').click(function(){
    $('.navbar-nav .nav-link').removeClass('active');
    $(this).addClass('active');
})
CSS
.navbar-dark .nav-item > .nav-link.active  {
    color:white;
    background-color: red;
}
Diese Website verwendet nur für den Betrieb notwendige Cookies. Durch die Nutzung der Website stimmen Sie dem Speichern von Cookies auf Ihrem Computer sowie den Datenschutzbestimmungen zu. Wenn Sie nicht einverstanden sind, verlassen Sie die Website. Weitere Information
programmieren:menu (412 views) · Zuletzt geändert: 22/05/2020 16:26 von conny

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki