Question

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

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.