Question

我想更改网站导航菜单中点击的最后一个菜单项的背景颜色。我正在寻找一种维护页面索引的方法。我可以使用查询参数。我不希望这会弄乱我的网址。我认为jQuery会做到这一点。

这是我在哪里

    $(document).ready(function () {
        $('.MenuLink').click(function () {
            //alert('clicked');
            $(this).css("background-color", "#FFFF00");
            //$(this).css("background-image", "url(/myimage.jpg)");
        });
    });

    <div class="MenuBar">
        <div><a class="MenuLink" href="/?Length=4">Main</a></div>
        <div><a class="MenuLink" href="/Link2">Link 2</a></div>
        <div><a class="MenuLink" href="/Link3">Link 3</a></div>
        <div><a class="MenuLink" href="/Link4">Link 4</a></div>
        <div><a class="MenuLink" href="/Link5">Link 5</a></div>
        <div class="LastMenuItem MenuLink"><a href="/Link6">Link 6</a></div>
    </div>

你有什么建议？

Answer 1

看起来您正在寻找AJAX GET，而不是您的链接产生的常规获取请求？

试试这个：

$(document).ready(function () {
    $('.MenuLink').click(function (e) {
        e.preventDefault();
        $(this).css("background-color", "#FFFF00");
          $.get($(this).attr('href'), function(response){
             // Do something with the response, which is whatever your links
             // return (probably HTML, right?)
          })
    });
});

Answer 2

正确的方法是在服务器端使用您的语言（我不知道是什么语言）：

这不是jquery的责任。

创建一个cssClass

.activeMenu { background:color: #FFFF00 }

并且在你的HTML中你不能这样说：

<div class="MenuBar">
    <div><a class="MenuLink <%=verifyActiveMenu('Main')%>" href="/?Length=4">Main</a></div>
    <div><a class="MenuLink <%=verifyActiveMenu('Link2')%>" href="/Link2">Link 2</a></div>
    <div><a class="MenuLink <%=verifyActiveMenu('Link3')%>" href="/Link3">Link 3</a></div>
    <div><a class="MenuLink <%=verifyActiveMenu('Link4')%>" href="/Link4">Link 4</a></div>
    <div><a class="MenuLink <%=verifyActiveMenu('Link5')%>" href="/Link5">Link 5</a></div>
    <div class="LastMenuItem MenuLink <%=verifyActiveMenu('Link6')%>"><a href="/Link6">Link 6</a></div>
</div>

并使用服务器端语言：

string verifyActiveMenu(string menu) {
    if (someMethodToGetUrl.toString().contains(menu)) {
        return "activeMenu";
    }

    return "";
}

Answer 3

首先，您应该从点击功能返回false，这样您就不会关注链接（我假设您不想关注链接）。其次，您可以使用href本身将背景颜色传递给click函数。不需要AJAX。你可以用javascript做到这一点。

Answer 4

在点击功能定义的末尾尝试return false;。由于您在锚标记上放置了onClick事件，因此浏览器需要停止事件传播。

$(document).ready(function () {
    $('.MenuLink').click(function () {
        //alert('clicked');
        $(this).css("background-color", "#FFFF00");
        //$(this).css("background-image", "url(/myimage.jpg)");
        return false; //important!
    });
});

Answer 5

我假设你在页面上完全搞定，而不是寻找ajax解决方案。

你可以试试这个。

 $(document).ready(function () {
            $('.MenuLink').click(function () {
                //alert('clicked');
                $(this).css("background-color", "#FFFF00");
                //$(this).css("background-image", "url(/myimage.jpg)");
            });

            var link = window.location.href;
            link = link.substring(link.lastIndexOf("/"));

            if(link){
               link = link.toLowerCase();
               $("div.MenuBar > div").each(function(){
                  if(link === $(this).find("a").text().replace(" ", "").toLowerCase()){
                      $(this).css("backgroundColor", "setTheColorHere");
                  }
               });
            }
            else{
                $("div.MenuBar > div:first").css("backgroundColor", "setTheColorHere");
            }
    });

jQuery - POST后维护当前页面

5 个答案: