jQuery - POST後維護當前頁面

我想更改網站導航菜單中單擊的最後一個菜單項的背景顏色。我正在尋找一種方法來維護頁面索引。我可以使用查詢參數。我不想讓這個混亂我的網址。我認爲jQuery會做到這一點。jQuery - POST後維護當前頁面

下面是我在哪裏，在

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

你有什麼建議？

來源

2011-08-16 P.Brian.Mackey

我不明白，你想避免點擊觸發？ –

@Acaz Souza - 我想突出顯示「活動菜單鏈接」;最後一個被點擊。因此，當用戶通過點擊菜單來改變頁面時，菜單顯示他們目前正在用顏色直觀地查看哪個頁面。 –

做到這一點，正確的方法是在服務器端使用的語言（我不知道是什麼語言）：

這不是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 ""; 
}

來源

2011-08-16 14:32:14

看起來您正在尋找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?) 
      }) 
    }); 
});

來源

2011-08-16 14:15:16 bfavaretto

+1是的，我認爲AJAX將是必要的。我確實想跟隨鏈接。這似乎是在正確的軌道上。它不會像我想要的那樣更改頁面內容。我正在修補它，看看我是否可以調整它來像正常的POST一樣更新HTML。 –

您可能不需要替換整個頁面內容，只是它的一部分（也許是菜單下的所有內容？）。你可以在回調函數中使用'$（'＃targetcontainer'）。html（response）'來做到這一點（註釋部分，在我的例子中），其中'＃targetcontainer'是一些現有的HTML容器（div或東西）。 – bfavaretto

首先，你應該從你的點擊函數返回false，這樣你就不能按照鏈接（我假設你不想按照鏈接）。其次，你可以使用href本身將背景顏色傳遞給click函數。不需要AJAX。你可以用javascript來做到這一點。

來源

2011-08-16 14:15:18 Blazes

在點擊函數定義的末尾嘗試一個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! 
    }); 
});

來源

2011-08-16 14:15:47

我假設你正在做一個完整的頁面而不是尋找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"); 
      } 
    });

來源

2011-08-16 14:20:50 ShankarSangoli

jQuery - POST後維護當前頁面

回答

相關問題