Question

我有一个Web应用程序，其中包含一个包含菜单的母版页和几个.aspx页。菜单类似于https://jsfiddle.net/96bd8y0z/

<style>
     a, a:visited { color:black }
     a.link.active { color:blue; }
<style>

<script>
     $(function () {
        $('a.link').click(function () {
        $('a.link').removeClass('active');
        $(this).addClass('active');
        });
     });

<ul>
  <li><a href="#" class="link active">Home</a></li>
  <li><a href="#" class="link">News</a></li>
  <li><a href="#" class="link">Contact</a></li>
  <li><a href="#" class="link">About</a></li>
</ul>

它在小提琴中工作正常：当您选择菜单中的一个链接时，其外观会发生变化，从黑色变为蓝色。但是当我尝试在我的Web应用程序中应用此方案时，我选择的链接（例如：'新闻'）会变为蓝色一秒钟，加载超链接页面（'新闻'），'新闻'再次变黑，并且菜单条目“Home”再次变为蓝色。

我可以理解这是因为重新加载了母版页部分，但我不知道如何解决它。

有没有办法让所选选项保持活动状态（即保持'新闻'为蓝色）？

我相信这个问题与How to make menu by using Master Page with jquery?类似，但回答此问题的用户发现这个问题不清楚，而且他的答案并没有为我解决。

Answer 1

在后端执行此操作可能会更好：在aspx中保留一个变量，指定您在哪个页面，然后在母版页中，比较每个菜单的变量，并添加＆＃34 ;有源＆＃34;只分类到你想要的那个。

如果你想用JavaScript做，你可以做一件事：当点击链接时，保存菜单元素的索引，然后在重新加载页面时，将该元素标记为活动元素。

这样的事情：

$(function() {
    $('a.link').click(function() {
        $('a.link').removeClass('active');
        $(this).addClass('active');

        // save the index for later (notice it's the index of the li, not the a)
        localStorage.setItem("active", $(this).parent().index());
    });

    // read the previous index or initialize to the first one if first time
    var active = localStorage.getItem("active") ? localStorage.getItem("active") : 0;
    // add the active class to the element
    $("ul li:nth-child(" + (parseInt(active)+1) +") a").addClass("active");
});

你可以看到它正在使用这个JSFiddle：https://jsfiddle.net/96bd8y0z/6/（重新运行或重新加载页面以查看蓝色链接是如何保留的）。但同样，在后端做这件事会更好。

Answer 2

好吧，菜单会在每个页面请求上重新呈现，很明显，在上一页打开时添加的所有类都会消失。

因此，为了选择所需的菜单项，应该检查每个链接：如果它的href属性等于加载页面的路由，则添加＆＃34; active＆＃34;上课。

与此同时，使用javascript进行操作是一种不好的做法，在构建模板时更好。但如果必须用js完成，你可能会做这样的事情（使用jquery进行链接选择）：

$(function() {
    var links = $('.link');

    for (var i = links.length; i--;) {
        var _this = $(links[i]);

        if (document.URL.split('http://site-domain.net')[1] == _this.attr('href')) {
            $('.link').removeClass('active');
            _this.addClass('active');
        }
    }
});

这是小提琴的例子：

https://jsfiddle.net/96bd8y0z/4/

在母版页中显示所选菜单项

2 个答案: