1

I have a tab bar that looks like this

enter image description here

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>
Owen Pauling
  • 11,349
  • 20
  • 53
  • 64
Syed Jafri
  • 416
  • 8
  • 17
  • I'm no expert on ASP.NET, but you're adding `@Ajax.ActionLink` to the `span` elements, these are the "words" you're talking about. Its peer element (i.e. `img`) is the image, and its parent (i.e `
    ` and `
    `) is the div above it. You might want to move your ajax actionlink a level upward.
     – Aeveus Jun 19 '14 at 18:50
  • Ok I moved my actionlink out of the span and into the `
    `.Now how would I make that entire div area clickable?
     – Syed Jafri Jun 19 '14 at 18:57
  • possible duplicate of [ASP MVC3 insert html tag inside actionlink](http://stackoverflow.com/questions/9718866/asp-mvc3-insert-html-tag-inside-actionlink) – Erik Philips Jun 19 '14 at 18:57
  • 2
    Not a duplicate; ajax actionlink does something different, and that solution won't work. – Brian Mains Jun 19 '14 at 18:59

2 Answers2

4

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.

tweray
  • 1,002
  • 11
  • 18
0

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

Brian Mains
  • 50,520
  • 35
  • 148
  • 257