放置DIV在asp.net MVC 3

锚一个内联元件内侧块元件的工作是不是由上可接受的Html，但是我有一个场景，其中我必须做出的div点击，放置DIV在asp.net MVC 3

<div class="category-item" style="background-image:url('/Themes/DarkOrange/Content/images/@String.Format("{0}.png", item.Id)');"> 

         <h2 class="title"> 
          <a href="@Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="@item.PictureModel.Title"> 
           @item.Name</a> 
         </h2> 
         <div class="picture"> 
          <a href="@Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="@item.PictureModel.Title"> 
           <img style="border-width: 0px;" alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl" 
            title="@item.PictureModel.Title" /></a> 
         </div> 
        </div>

我想把上述DIV类类别项放置一个锚标签，其是可点击内：

<a href="@Url.RouteUrl("Category", new { categoryId = item.Id, SeName = item.SeName })" title="@item.PictureModel.Title"></a>

的与传递给它的父item.id DIV背景图像的变化，因此，背景图像是用于每个类别不同项目，主要目的是使可点击的导航到提供的routeurl。是否有可能实现这样的目标，或者有没有其他办法可以实现这个目标？

任何建议或帮助将有所帮助。

来源

2012-03-21 Mr A

Div也有一个点击事件。 – jrummell 2012-03-21 17:30:45

拥有'a'标签[HTML5中的换行块元素]（http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element）是完全有效的。在div上放置导航点击处理程序对通过键盘导航的用户非常不友好。 – steveax 2012-03-21 17:42:52

你可以添加一个点击处理程序到你的div。

设置的URL在data属性：

然后引用它在点击处理程序：

$(".category-item").click(function() 
{ 
    window.location = $(this).data("url"); 
    return false; 
});

更新

正如在评论中提到的，可点击的div不可访问，所以你还应该包括一个正常的锚点。

<div class="category-item"> 
    @Html.ActionLink("Category", new { categoryId = item.Id, SeName = item.SeName }) 
</div>

然后，您可以更改点击处理程序使用锚的href而不是data属性。

$(".category-item").click(function() 
{ 
    window.location = $(this).find("a").attr("href"); 
    return false; 
});

来源

2012-03-21 17:31:33 jrummell

请不要这样做。那些使用键盘导航的人很难进入。 – steveax 2012-03-21 17:37:54

好点。如果你这样做，确保在div中包含一个常规锚点。我又增加了一个例子。 – jrummell 2012-03-21 17:40:13

this question的答案显示了如何在图像周围创建ActionLink。你可以使用类似的方法...

来源

2012-03-21 17:34:17

放置DIV在asp.net MVC 3

回答

相关问题