使包含AJAX ActionLink的DIV可单击 [英] Make DIV containing AJAX ActionLink clickable

问题描述

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

I have a tab bar that looks like this

现在，我正在使用Ajax ActionLink加载要显示在选项卡栏下方的部分视图.仅可单击服务器和配置文件一词.我希望整个选项卡都可单击，而不仅仅是选项卡中的单词，不仅是选项卡中的图像，而且我希望整个选项卡都应可点击.我该如何实现?

Right now I am using the Ajax ActionLink to load partial views to be displayed below the tab bar. Only the words Servers and Profiles are clickable. I want the whole tab to clickable, not just the words in the tab, and not just the image in the tab but I want teh entire tab should be clickable. How can I achieve this?

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

推荐答案

有些简单(好吧，也许不是很简单:))css技巧可以使链接扩展到整个div.

Some simple (ok, maybe not really simple :) ) css trick can make the link expands to the whole 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 .

我认为，如果您将Ajax助手替换为< a> 并将其发布在css/html标记中，将会有更多的想法可以使它工作.

I think if you replace the ajax helper with an <a> and post it in css/html tags, there will be a lot more ideas to make it work.

这篇关于使包含AJAX ActionLink的DIV可单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！