<title>
</title>
<script src= "Js/jquery.min.js" type= "Text/javascript" ></script>
<script language= "javascript" type= "Text/javascript" >
$ (document). Ready (function () {
$ ("Ul.menu li:first-child"). AddClass ("current");
$ ("div.content"). Find ("Div.layout:not (: First-child)"). Hide ();
$ ("Div.content div.layout"). attr ("id", function () {return idNumber (' No ') + $ ("Div.content div.layout"). Index (This)});
$ ("Ul.menu li"). Click (function () {
var C = $ ("Ul.menu Li");
var index = C.index (this);
var p = idNumber ("No");
Show (C,INDEX,P);
});
Function Show (Controlmenu,num,prefix) {
var content= prefix + num;
$ (' # ' +content). Siblings (). Hide ();
$ (' # ' +content). Show ();
Controlmenu.eq (num). addclass (' current '). Siblings (). Removeclass ("current");
};
function IdNumber (prefix) {
var idnum = prefix;
return idnum;
};
});
</script>
<style type= "Text/css" >
* {margin:0; padding:0}
Ul,li {
List-style:none
}
. box {
border:1px solid #ccc;
margin:10px;
}
. tagmenu {
height:24px;
position:relative;
BORDER-BOTTOM:1PX Solid #999
}
. Tagmenu UL {
Position:absolute;
bottom:-1px;
height:26px;
}
Ul.menu Li {
Float:left;
border-left:1px solid #999;
padding:0 12px;
Cursor:pointer
}
Ul.menu Li.current {
border:1px solid #999;
Border-bottom:none;
Background: #fff;
height:25px;
line-height:26px;
margin:0
}
. Content {padding:10px}
</style>
<body>
<div class= "box" >
<div class= "Tagmenu" >
<ul class= "Menu" >
<li>label 1.1</li>
<li>label 1.2</li>
<li>label 1.3</li>
<li>label 1.4</li>
</ul>
</div>
<div class= "Content" >
<div class= "Layout" >infomation 1.1</div>
<div class= "Layout" >infomation 1.2</div>
<div class= "Layout" >infomation 1.3</div>
<div class= "Layout" >infomation 1.4</div>
</div>
</div>
</body>
