Question

我有一个看起来像这样的标签栏

enter image description here

现在我正在使用Ajax ActionLink加载部分视图以显示在标签栏下方。只有单词服务器和配置文件是可单击的。我希望整个标签可以单击，而不仅仅是标签中的单词，而不仅仅是标签中的图像，但我希望整个标签都可以点击。我怎样才能做到这一点？

<div id="TabBar">
    <div class="TabActive">
        <img class="TabIcon" src="~/Images/servers_orange.png" alt="Servers" />
        <span class="TabLabel">
            @Ajax.ActionLink("Servers", "ServersTab",
                new AjaxOptions
                {
                    HttpMethod = "GET",
                    InsertionMode = InsertionMode.Replace,
                    UpdateTargetId = "CurrentView"
                }
            )
        </span>
    </div> 

    <div class="TabInactive">
        <img class="TabIcon" src="~/Images/profiles_white.png" alt="Profiles" />
        <span class="TabLabel">
            @Ajax.ActionLink("Profiles", "ProfilesTab",
                new AjaxOptions
                {
                    HttpMethod = "GET",
                    InsertionMode = InsertionMode.Replace,
                    UpdateTargetId = "CurrentView"
                }
            )
        </span>
    </div>
<div id="CurrentView">@Html.Partial("ServersTab")</div>

Answer 1

一些简单的（好吧，也许不是很简单:)）css技巧可以使链接扩展到整个div。

.TabActive {
    width: 200px; /*Define the width of button*/
    position: relative; /*Important*/
}

.TabLabel a {
    position: absolute; /*Define absolute postion among the parent div*/
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%; /*Make sure the link expands among the whole parent div*/
    line-height: 200px; 
    text-align: right; /*small trick to place the text to proper place, change this accordingly*/
}

这里是jsfiddle。

我认为如果你用一个<a>替换ajax助手并将其发布在css / html标签中，那么将会有更多的想法让它发挥作用。

Answer 2

您必须将整个代码段包含在actionlink方法（第一个参数）中，或者使用jQuery作为替代，或者当您单击外部元素时，触发链接上的单击（可能使用jQuery）。

使包含AJAX ActionLink的DIV可单击

2 个答案: