مرجع تخصصی برنامه نویسان

بزرگترین انجمن برنامه نویسان فارسی زبان

آموزشگاه برنامه نویسان

فعال کردن منو با جیکوری

چهارشنبه, 22 دی 1395 11:37

فعال کردن منو با جیکوری

با سلام من یک مستر پیج دارم که یک منو در آن وجود داره میخوام وقتی روی هر گزینه منو کلیک میشه اون گزینه کلاس اکتیو رو بگیره و رنگش تغییر کنه هر چی  سعی کردم با اد کلس در جاوااسکریپت این کارو انجام بدم نشد.

 <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>

آکادمی برنامه نویسان تبلیغات در برنامه نویسان
چهارشنبه, 22 دی 1395 12:43

نقل قول : فعال کردن منو با جیکوری

به 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');
    }
    });
});

کسانی که از این پست تشکر کرده اند : eliblue,
چهارشنبه, 22 دی 1395 13:57

نقل قول : فعال کردن منو با جیکوری

این کد رو درون هد مستر پیج گذاشتم اما اثر نکرد حتی من داخل تابع   با alert خواستم مقدار pathname را نمایش بدم اما کلا انگار داخل داکیومنت ردی نمیره

کسانی که از این پست تشکر کرده اند :
چهارشنبه, 22 دی 1395 15:32

نقل قول : فعال کردن منو با جیکوری

فایل jquery.js را قبل از این اسکریپت قرار داده اید ؟ و اینکه اسم منو شما #menuul است ؟ لطفا کد html منوی خودتون رو مجدد قرار دهید ؟

کسانی که از این پست تشکر کرده اند : eliblue,
چهارشنبه, 22 دی 1395 16:22

نقل قول : فعال کردن منو با جیکوری

بله فایل جیکوری مورد داشت که دوباره اضافه کردم و الان وارد تابع میشه اما باز  هم کلاس اکتیو اعمال نمیشه. این هم کد منو: میخوام کلاس active دقیقا مثل گزینه اول این منو بعد از کلاس list-group-item به گزینه ای که روش کلیک شده اعمال شه

کسانی که از این پست تشکر کرده اند :
پنج شنبه, 23 دی 1395 09:37

نقل قول : فعال کردن منو با جیکوری

شما برای اینکه کلاس 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');
            }
        });
    });

کسانی که از این پست تشکر کرده اند : eliblue,
شنبه, 25 دی 1395 09:21

نقل قول : فعال کردن منو با جیکوری

ممنون الان li  هایی که کوری استرینگ تو href آنها ارسال نمیشه اوکی شد. اما گزینه هایی که در Href آنها بعد از اسم صفحه کوری استرینگ ارسال شده کلاس اکتیو نمیگیرند.

کسانی که از این پست تشکر کرده اند :

ارسال پاسخ برای این تاپیک

ارسال پاسخ مخصوص اعضا سایت می باشد ! میتوانید با حساب کاربری خود وارد سایت شده یا ثبت نام کنید