Making an entire tab clickable

Question

Hey everyone,

I'm making a template that is relying on a lot on a tabbed interface and in order to make it a bit more intuitive, I want to make sure that a user can click anywhere in the tab in order to activate it, instead of having to click the text inside the tab. In order to achive this, I'm currently doing this:

<div class="tab" onclick="javascript:window.location='http://example.com';"&gt;
    tab text
</div>

for all the tabs I create. Does anyone have a more efficient way of doing this that they'd like to share with me/the community?

Answer 1

Since you're opening up a new window, this is about as efficient as you're going to get, unless you want to put it into a function to shorten it for typing purposes.

Answer 2

It's better in terms of semantics and compatibility to modify the <a> tag with CSS to do this, you could try something like this:

a.tab { display:block; }

And then also set other relevant attributes like the width/height, background color, etc for that.

Then instead your HTML looks like this:

<a class="tab" href="http://example.com"&gt;tab text</a>

Answer 3

Instead of using a <div/> tag, why not use an <a/> with appropriate styling to match what is currently applied to the <div/>? That way you can use the href attribute of the anchor rather than resorting to JavaScript to direct the user.

Answer 4

It would be more accessible if you did this:

<div class="tab">
    <a href="..." style="display: block;">tab text</a>
</div>

Setting the <a> to block lets it fill the width, and you can give it height, padding etc. just like a <div>. You could even do away with the <div> entirely.

<a href="..." class="tab" style="display: block;">tab text</a>

Of course, you'd add display: block; to .tab {} but you get the idea.

Answer 5

As mentioned by John Rasch, making a javascript function for typing purpose could help you, but also... dont make me think! If its clickable, show it with cursor: hand in the css!!!

Answer 6

how about:

<script type="text/javascript" src="jquery.js">
$(document).ready(function(){
   $(".tab").click(function(event){
     window.location='http://example.com';
   });
 });
</script>

...

<div class="tab">
tab text
</div>

Answer 7

Make your a tags block-level elements and put your tab padding on the link instead. For example, if you have…

<style type="text/css">
    div.tab {
        float: left;
        padding: 10px;
    }
</style>

<div class="tab"><a href="http://example.com"&gt;tab text</a></div>

…then change it to this…

<style type="text/css">
    div.tab {
        float: left;
        padding: 0;
    }

    div.tab a {
        display: block;
        padding: 10px;
    }
</style>

<div class="tab"><a href="http://example.com"&gt;tab text</a></div>

This will cause the link to take up the entire "body" of the tab, so you can click anywhere on it.

Answer 8

PPS: the short answer was, you can turn a A tag to display "block" mode, and add any padding, and that padding will catch the clicks. Floating the element (float:left, float:right) is an implicit "display:block". An "inline" element (such as SPAN) also uses padding to determine the area which gets the background image; but without affecting the layout.

The simplest way to do it would be something like this:

ul.tabs, ul.tabs li { float:left; margin:0; padding:0; list-style:none; }
ul.tabs li a { float:left; padding:4px 10px 4px; border:1px solid blue; border-bottom:none; margin-right:4px; }
.clear { clear:both; /* add width:100%; overflow:hidden; for IE6 pos */ }

<ul class="tabs">
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Ipsum</a></li>
    ...etc...
</ul>
<div class="clear"></div>

If you use the same width for each tab (depending on longest text in it), then you can even use a single gif background image:

ul.tabs li a { /* same above + */ background:url(tab-bg.gif) no-repeat 50% 0; text-align:center; width:120px; }

The more advanced, classic way of doing tabs that adapt to varying font sizes and can use custom imags for the corners and filling is "Sliding Doors" :

http://www.alistapart.com/articles/slidingdoors/

Answer 9

There are two techniques to achieve this

inline li + a and float li + block a

summariezed here

http://www.pagecolumn.com/webparts/making_tabs_with_CSS.htm