Catagory 5 Java

My Mini Tab Window 2

This is my work. Not very elegant. Still needs to be tightend up a little. It does the job though.

P1 When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it. When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it.

P2 When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it.

P3 When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it.

P4 When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it.
When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it.

Script

HTML Code

<body onload="myfunction1()">

<div class="padouter">
<div id="menu_bar">
<ul>
<li><a id="tab1" onclick="myfunction1()" href="#">Link 1</a></li>
<li><a id="tab2" onclick="myfunction2()" href="#">Link 2</a></li>
<li><a id="tab3" onclick="myfunction3()" href="#">Link 3</a></li>
<li><a id="tab4" onclick="myfunction4()" href="#">Link 4</a></li>
</ul>
</div>
<div class="pad">
<div id="p1">
P1 When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it. When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it.
</div>
<div id="p2">
P2 When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it.
</div>
<div id="p3">
P3 When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it.
</div>
<div id="p4">
P4 When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it.</br> When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it.
</div>
</div></div>

Styles

div.padouter {width:300px; height:auto;padding:0px;background:#fff;}
div.pad {width:100%; height:auto;padding:5px;border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;}

#menu_bar {width:290px;background: #fff url(images/tab_bg.jpg) repeat-x bottom left;}
#menu_bar ul { float:left; width:100%; padding:0; margin:0 0 0 5px; list-style-type:none; border-left:1px solid #000; }
#menu_bar a { float:left; width:auto; text-decoration:none; color:#000; background-color:#ddd; padding:0.2em 0.6em; border-top:1px solid #000; border-right:1px solid #000; }
#menu_bar a:hover {text-decoration: underline; background:#fff url(images/tab_on.jpg) repeat-x bottom left;color:#000; }
#menu_bar a:active {background:#fff url(images/tab_on.jpg) repeat-x bottom left;} #menu_bar li{ display:inline; }

Images

Tab Background

Tab not selected

Tab selected

Top