active menu در بوت استرپ [بایگانی]

pary_daryayi

چهارشنبه 26 شهریور 1399, 11:11 صبح

سلام دوستان . من یک منوی bootstrap دارم . این کد رو برای active نوشتم که روی هر لینک کلیک میکنیم اننخاب شده باشه ولی جواب نمیده.

<script>
$(document).ready(function(){
$( '.navbar-nav a' ).on( 'click', function () {
$( '.navbar-nav' ).find( 'li.active' ).removeClass( 'active' );
$( this ).parent( 'li' ).addClass( 'active' );
});
});

</script>

, و کد html

<ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link " href="home.php">صفحه اصلی</a> </li> <li class="nav-item"> <a class="nav-link" href="about.php">درباره ما</a> </li> <li class="nav-item"> <a class="nav-link" href="contact.php">تماس با ما</a> </li> <li class="nav-item"> <a class="nav-link" href="#">قوانین و مقررات </a> </li></ul>

و کد css:

.navbar-nav li.active > a {
background-color: #333;
color: #fff;
}

memojtabazamani

جمعه 09 آبان 1399, 13:09 عصر

سلام
کد HTML :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwi GgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>

.active {

color :red;
}
</style>
</head>
<body>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</body>
</html>

کد JavaScript :

$(document).ready(function(){
$( '.nav-link' ).on( 'click', function () {
$(".nav-link").each(function(index, item) {
$(item).removeClass('active');
});
$(this).addClass('active');
});
});

امیدوارم کمکتون بکنه میتونید آنلاین هم کد رو ببینید اگر نیومد از قند شکن استفاده کنید ��
در این لینک :
https://jsfiddle.net/hg1etcan/23/
موفق باشین.