修改

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使整个菜单栏列表项区域可点击。

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

这是一个使用jquery使整个div可点击的示例：

<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);
});

看一下DEMO 或者this one，更好。

修改

要检查元素中的href，请查看here。

EDIT2

$(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");
})

如何使整个菜单栏项目区域可单击

2 个答案:

修改

EDIT2