Here is a light blue vertical concise tab, tab, a style that many people like.

The screenshot of the running effect is as follows:

The online demo address is as follows:

The specific code is as follows:

<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>concise tab</title>
<style type="text/css">
body {padding:0;font:12px "Songti";}
#lib_tab1_sx {width:500px;margin:0px;padding:0px;margin-bottom:15px;overflow:hidden;}
.lib_tabborder_sx {border:1px solid #95c9e1;}
.lib_menubox_sx {line-height:28px;position:relative;float:left;width:130px;height:240px;border-right:1px solid #95c9e1;}
.lib_menubox_sx ul {margin:0px;padding:0px;list-style:none;position:absolute;top:15px;left:5px;margin-left:10px;height:25px;text-align:center;}
.lib_menubox_sx li {display:block;cursor:pointer;width:114px;color:#949694;font-weight:bold;margin-bottom:5px;height:25px;line-height:25px;background-color:#e4f2fd}
.lib_menubox_sx li.hover {padding:0px;background:#fff;width:116px;border:1px solid #95c9e1;border-right:0;
.lib_contentbox_sx {margin-top:0px;border-top:none;padding:20px;border-left:0;margin-left:130px;}
function settab (name, cursel, n) {
 for (i=1;i<= n;i ++) {
 var menu=document.getelementbyid (name + i);
 var con=document.getelementbyid ("con _" + name + "_" + i);
 menu.classname=i == cursel?"hover":"";
 con.style.display=i == cursel?"block":"none";
  <li onclick="settab (" one ", 1,5)">Script code</li>
  <li onclick="settab (" one ", 2,5)">asp class</li>
  <li onclick="settab (" one ", 3,5)">php class</li>
  <li onclick="settab (" one ", 4,5)">jsp class</li>
  <li onclick="settab (" one ", 5,5)">.net class</li>
  <div>script list</div>
  <div>asp class update</div>
  <div>php class update</div>
  <div>jsp class update</div>
  <Div>asp.net class update</div>
  • Previous A small note of the mysql master-slave configuration solution
  • Next Text and image timing switching effect code implemented by JS