با سلام من یک مستر پیج دارم که یک منو در آن وجود داره میخوام وقتی روی هر گزینه منو کلیک میشه اون گزینه کلاس اکتیو رو بگیره و رنگش تغییر کنه هر چی سعی کردم با اد کلس در جاوااسکریپت این کارو انجام بدم نشد.
<ul class="sidebar-menu" >
<li class="active">
<a href="Admin-Profile.aspx"><i class="fa fa-bar-chart-o"></i><span>پروفایل شما</span></a>
</li>
<li class="hasSubmenu">
<a href="#users-menu"><i class="fa fa-mortar-board"></i><span>مدیریت کاربران</span></a>
<ul id="users-menu">
<li><a href="AdminStudent.aspx"><span>مدیریت دانش آموزان</span></a></li>
<li><a href="AdminProfessor.aspx"><span>مدیریت اساتید</span></a></li>
<li><a href="AdminPersonel.aspx"><span>مدیریت پرسنل</span></a></li>
<li><a href="AdminRole.aspx"><span>مدیریت نقش ها</span></a></li>
</ul>
</li>
</ul>
این هم کد یک مستر پیج دیگر است که منوی دیگری در آن وجود دارد که میخواهم کلاس اکتیو را گزینه ای که روش کلیک میشه بگیره
<div class="panel-body list-group">
<ul class="list-group list-group-menu" id="menuul" runat="server">
<li class="list-group-item active" ><a class="link-text-color" href="StudentDashboard.aspx">داشبرد</a></li>
<li class="list-group-item"><a class="link-text-color" href="../LessonList.aspx">لیست دروس</a></li>
</ul>
</div>
به ul منوی خودتون یک ID با نام دلخواه بدید که در پروژه استفاده نشده است مثلا : id="main-nav" و سپس اسکریپت زیر را در متد document.ready صفحه مسترپیج قرار دهید :
$(function(){
var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
$('#main-nav ul li a').each(function() {
if ($(this).attr('href') == pathname)
{
$(this).addClass('active');
}
});
});
این کد رو درون هد مستر پیج گذاشتم اما اثر نکرد حتی من داخل تابع با alert خواستم مقدار pathname را نمایش بدم اما کلا انگار داخل داکیومنت ردی نمیره
فایل jquery.js را قبل از این اسکریپت قرار داده اید ؟ و اینکه اسم منو شما #menuul است ؟ لطفا کد html منوی خودتون رو مجدد قرار دهید ؟
بله فایل جیکوری مورد داشت که دوباره اضافه کردم و الان وارد تابع میشه اما باز هم کلاس اکتیو اعمال نمیشه. این هم کد منو: میخوام کلاس active دقیقا مثل گزینه اول این منو بعد از کلاس list-group-item به گزینه ای که روش کلیک شده اعمال شه
شما برای اینکه کلاس active را به li ی لینک بدهید برای این کار از متد parent می توانید در jquery استفاده کنید :
$(document).ready(function() {
var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
$('#menuul li a').each(function () {
if ($(this).attr('href') == pathname) {
$(this).parent("li").addClass('active');
}
});
});
ممنون الان li هایی که کوری استرینگ تو href آنها ارسال نمیشه اوکی شد. اما گزینه هایی که در Href آنها بعد از اسم صفحه کوری استرینگ ارسال شده کلاس اکتیو نمیگیرند.
هیچ کاربری تا کنون از این پست تشکر نکرده است
با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)