Simple Tab Navigation

Demo

Download

<!– sTYLE fOR sIMPLE tAB nAVIGATION –>

<style>

.tabs {height:500px;overflow:hidden;width:100%;}

UL.tabNavigation {list-style: none;margin: 0; padding: 0;font-size:15px;   }
UL.tabNavigation LI {display: inline;  }
UL.tabNavigation LI A { padding: 0 5px 5px; background-color: #ddd ;  color: #000;-moz-border-radius:6px 6px 0 0;border:1px solid #ddd;    }
UL.tabNavigation LI A.selected, UL.tabNavigation LI A:hover { background-color: #fff;    color: #000; border-bottom:none; padding-bottom:7px;     }
UL.tabNavigation LI A:focus { outline: 0;     }
div.tabs > div { padding: 5px;border-top: 3px solid #eee;min-height:350px; }
div.tabs > div h2 {      margin-top: 0;  }

</style>

<!– jQUERY sCRIPT –>
<script type=”text/javascript” charset=”utf-8″>
$(function () {
var tabContainers = $(‘div.tabs > div’);
tabContainers.hide().filter(‘:first’).show();

$(‘div.tabs ul.tabNavigation a’).click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$(‘div.tabs ul.tabNavigation a’).removeClass(‘selected’);
$(this).addClass(‘selected’);
return false;
}).filter(‘:first’).click();
});
</script>

<!– hTML cODE –>

<div>
<ul >
<li><a href=”#first”>உரை</a></li>
<li><a href=”#second”>மொழிப்பெயர்ப்பு</a></li>
<li><a href=”#third”>புகைப்படம்</a></li>
<li><a href=”#four”>குறிப்பு</a></li>

</ul>

<div id=”first”>
<!– sample contant –>
</div>
<div id=”second”>
<!– sample contant –>
</div>
<div id=”third”>
<!– sample contant –>
</div>
<div id=”four”>
<!– sample contant –>
</div>
</div>

Demo

Download

Advertisements
Posted in Tips. Tags: . Leave a Comment »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: