Geek Answers Handbook

Create an entire tab

I am making a template that relies heavily on a tabbed interface, and to make it more intuitive, I want to make sure that the user can click anywhere in the tab to activate it, instead of clicking the text inside the tab. To achieve this, I am doing this now:

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

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

+4
source share
9 answers

This would be more accessible if you did this:

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

Setting <a> to block allows you to fill in the width, and you can assign it height, padding, etc., like <div> . You can even completely abandon the <div> .

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

Of course you should add display: block; in .tab {} , but you get this idea.

+11
source

Better in terms of semantics and compatibility for modifying the <a> tag with CSS, to do this, you can try something like this:

 a.tab { display:block; }

And then also set other relevant attributes for it, such as width / height, background color, etc.

Then, instead, your HTML looks like this:

 <a class="tab" href="http://example.com">tab text</a>
+6
source

Tag a block level elements and place a tab in 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">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">tab text</a></div>

This will cause the link to occupy the entire “body” of the tab, so you can click anywhere on it.

+1
source

PPS: the short answer was, you can include the tag A to display a “block”, and add any add-on, and this add-on will capture clicks. A floating element (float: left, float: right) is an implicit "display: block". The inline element (for example, SPAN) also uses padding to identify the area that receives the background image; but without affecting the layout.

The easiest way to do this 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 the longest text in it), you can even use one background gif image:

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

A more advanced, classic way to make tabs that adapt to different font sizes, and can use custom imags for corners and filling - "Sliding doors":

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

+1
source

Since you open a new window, it is about as effective as you are going to get, unless you want to include it in a function to shorten it for text input.

0
source

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

0
source

As John Rush mentioned, creating a javascript function for typing can help you, but also ... don't make me think! If its clickable, show it with the cursor: hand in css !!!

0
source

What 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>
-1
source

There are two methods to achieve this.

built-in li + a as well as float li + block a

briefly here

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

-1
source

More articles:


All Articles