散步在海洋中的碼農

參考網址如下

https://usefulscripts.wordpress.com/2016/05/03/how-to-set-bootstrap-navbar-as-active-for-asp-net-site-master/

修正js查詢出現 undefined造成js錯誤訊息

<div id="navbar" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="~/">My Demo Site</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
	<li><a href="~/">Home</a></li>
	<li><a href="~/DemoPage1.aspx">Demo 1</a></li>
	<li><a href="~/DemoPage2.aspx">Demo 2</a></li>
	<li><a href="~/DemoPage3.aspx">Demo 3</a></li>
</ul>
</div>
</div>
</div>
</div>

$(document).ready(function () {
            var pageName = window.location.pathname;
            var newPageName = pageName;

            if (pageName.indexOf('/') == 0) {
                newPageName = pageName.substring(1, pageName.length);

                $.each($('#navbar').find('li'), function () {
                    var hrefVal = $(this).find('a').attr('href');
                    if (hrefVal == undefined) {
                        return;
                    }

                    if (hrefVal.indexOf(newPageName) >= 0) {
                        $(this).addClass('active').siblings().removeClass('active');
                    }

                });
            }
        });

另外一種JS寫法..

       $(document).ready(function () {
                    var url = window.location;
                    $('.navbar .nav').find('.active').removeClass('active');
                    $('.navbar .nav li a').each(function () {
                        if (this.href == url) {
                            $(this).parent().addClass('active');
                        }
                    });
                });

 

=====================

2020/6/11  延伸問題

子選單 active的動作，類似點部落後台  左方選單那樣子，post之後記憶他的選單 並展開選項..... 如下

        $(function () {
               var url = window.location;
            $('.navbar-static-side').find('.active').removeClass('active');

            $('.navbar-static-side a').each(function () {
                if (this.href == url) {
                    $(this).parent("li").toggleClass("active");                   
                    if ($(this).parents('ul').length == 2) {
                              $(this).parent().parent().parent().toggleClass("active");
                       $("#side-menu").find("li.active").has("ul").children("ul").addClass("collapse in");
                    }
                }
            });
        })

 

 

 

 

以上文章僅用紀錄資料使用.....