Make DIV containing AJAX ActionLink clickable - ajax

Question

I have a tab bar that looks like this
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>

Answer 1

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*/
}
Here's a jsfiddle.
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.

Answer 2

You would have to include the entire snippet inside the actionlink method (first param), or use jQuery as an alternative, or when you click the outer element, trigger the click on the link (possible with jQuery).