如何使整個菜單欄項目區域可單擊

Question

我正在使用菜單欄控件。 這是我的CSS和設計代碼：

css：

.Menu 
{ 
    background:transparent url(../images/blueslate_background.gif) repeat-x;
    text-align:center;
    font-family : "lucida grande", tahoma, verdana, arial, sans-serif;
    font-size:12px;
    font-weight:bold;
    border: None 0px #fff !important;
}

.menuhover
{
     color:#fff;
     background:transparent url(../images/blueslate_backgroundOVER.gif) repeat-x left center;
     cursor:pointer;
}

設計

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MenuControl.ascx.cs" Inherits="MenuControl" %>
<link rel="stylesheet" href="css/Menu3.css" type="text/css" />
<div id="header" align="center" >
<table width="100%" cellpadding ="0" cellspacing ="0" align="center">
<tr>
<td align="center">
   <asp:Menu ID="Menu1" runat="server" Orientation ="Horizontal"  CssClass="Menu"
        ForeColor ="Black" Width="100%" ScrollDownText="">
     <StaticMenuItemStyle Height ="40px"/>
    <DynamicMenuItemStyle CssClass ="Menu" Height="30px" HorizontalPadding="10px"/>
    <dynamichoverstyle  CssClass ="menuhover"/>
    <StaticHoverStyle CssClass ="menuhover"/>
    </asp:Menu>
</td>
</tr>
</table>
</div>

我只想使整個菜單欄列表項區域可單擊，是否可以使用jquery或javascript。

- - - - - - - - - - - - - - - - - - 更新 - - - - - - - ----------------------------------------

這是使整個div可通過jquery點擊的示例：

<script type="text/javascript" language="javascript">
$(document).ready(function(){                 
     $(".thumb").click(function(){
     window.location=$(this).find("a").attr("href");return false;
     });
});
</script>

- - - - - - - - - - - - - - - - - - 更新 - - - - - - - ----------------------------------------

解決方案：

    <script type="text/javascript" language="javascript">
$(document).ready(function() {                 
     $(".Menu").click(function(e) {
         window.location = $(e.target).find("a").attr("href");
         return false;
     });
});
</script>

當我單擊原始菜單文本錯誤時發生錯誤：

Server Error in '/EasyWeb' Application.

The resource cannot be found.

Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable.  Please review the following URL and make sure that it is spelled correctly. 

Requested URL: /EasyWeb/undefined

Version Information: Microsoft .NET Framework Version:2.0.50727.3053; ASP.NET Version:2.0.50727.3053

Answer 1

也許您想檢查是否單擊了“標題”，然后檢查是否單擊了哪個元素。

在這種情況下，您必須使用JQuery進行檢查：

$('#header').on('click', function(e) {
    var what = $(e.target).html();
    $('#clicked').html("You have selected: " + what);
});

看看這個演示 。
還是這個 ，更好。

編輯

要同時檢查href中的元素，請在此處查看 。

編輯2

$(document).ready(function() {                 
     $(".Menu").click(function(e) {
         window.location = $(e.target).find("a").attr("href");
         return false;
     });
});

Answer 2

您可以使用.Menu類為元素提供點擊處理程序。

$(document).on("click", ".Menu", function(){
  alert("Menu clicked");
})