div css js implements vertically arranged label tabs_html/css

Home

Web Front-end

HTML Tutorial

div css js implements vertically arranged label tabs_html/css_WEB-ITnose

Jun 24, 2016 pm 12:30 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>竖向标签选项卡 by okajax.com</title>
<style type="text/css">
<!--
.left_box{
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
}
.infopublish ul.left_box li {
line-height: 1.89;
}
body {
color: #333;
text-align: left;
font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
width:300px;
}
ol, ul {
list-style: none;
}
.box{
border:1px solid #99BBDD;
padding-bottom:2px;

}
.box_1 ul{
padding:5px;
}
.box_title{
position: relative;
height: 28px;
}
.box_title h3 {
height: 26px;
line-height: 26px;
margin: 1px 1px 0;
padding: 0 10px;
font-weight: bold;
font-size: 120%;
color: #275c91;
}
.box_title span {
float:right;
padding-top:5px;
padding-right:5px;
}

.infopublish {
border-color: #7bce74;
}
.infopublish .box_title {
background: none;
}
.infopublish .box_title h3 {
height: 30px;
line-height: 30px;
margin: 1px 1px 0;
color: #fff;
background: url(nav.png) repeat-x 0 -390px;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/**/
.clearfix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.v-tab {
width: 71px;
float: left;
display: inline;
overflow: hidden;
margin: -2px 1px -6px -5px !important;
margin: -5px 1px -6px -5px;
}

.v-tab li {
float: left;
}
.v-tab li a {
float: left;
width: 70px;
height: 29px;
line-height: 29px;
text-align: center;
background: #ebf7e9;
border: solid #7bce74;
border-width: 0 1px 1px 0;
}
.v-tab li a:link,
.v-tab li a:visited {
color: #2e7428;
}
.v-tab li a.current,
.v-tab li a:hover,
.v-tab li a:active {
background: #fff;
border-right: 0;
font-weight: bold;
padding-right: 1px;
}
.box .left_box li{
line-height:24px;
}
.disable {
display: none;
}
-->
</style>
<script language="javascript" type="text/javascript">
function doClick_jy(o){
o.className="current";
var j;
var id;
var e;
for(var i=1;i<=8;i ){
id ="jy" i;
j = document.getElementById(id);
e = document.getElementById("jy_con" i);
if(id != o.id){
j.className="";
e.style.display = "none";
}else{
e.style.display = "block";
}
}
}

</script>
</head>

<body>
<div class="box infopublish">
<div class="box_1 clearfix">
<ul class="v-tab">
<li><a href="#" class="current" id="jy1" onmouseover="javascript:doClick_jy(this)">Ajax中国1</a></li>
<li><a href="#" id="jy2" onmouseover="javascript:doClick_jy(this)">Ajax中国2</a></li>
<li><a href="#" id="jy3" onmouseover="javascript:doClick_jy(this)">Ajax中国3</a></li>
<li><a href="#" id="jy4" onmouseover="javascript:doClick_jy(this)">Ajax中国4</a></li>
<li><a href="#" id="jy5" onmouseover="javascript:doClick_jy(this)">Ajax中国5</a></li>
<li><a href="#" id="jy6" onmouseover="javascript:doClick_jy(this)">Ajax中国6</a></li>
<li><a href="#" id="jy7" onmouseover="javascript:doClick_jy(this)">Ajax中国7</a></li>
<li><a href="#" id="jy8" onmouseover="javascript:doClick_jy(this)">Ajax中国8</a></li>
</ul>
<ul class="left_box" style="display:block;" id="jy_con1">
<li>· <a href="http://www.okajax.com/a/200808/0RX0252008.html" target="_blank">本例官方地址1</a></li>
<li>· <a href="http://www.okajax.com/a/200808/0RX0252008.html" target="_blank">本例官方地址1</a></li>
<li>· <a href="http://www.okajax.com/a/200808/0RX0252008.html" target="_blank">本例官方地址1</a></li>
<li>· <a href="http://www.okajax.com/a/200808/0RX0252008.html" target="_blank">本例官方地址1</a></li>
<li>· <a href="http://www.okajax.com/a/200808/0RX0252008.html" target="_blank">本例官方地址1</a></li>
<li>· <a href="http://www.okajax.com/a/200808/0RX0252008.html" target="_blank">本例官方地址1</a></li><li>· <a href="http://www.okajax.com/a/200808/0RX0252008.html" target="_blank">本例官方地址1</a></li>
<li>· <a href="http://www.okajax.com/a/200808/0RX0252008.html" target="_blank">本例官方地址1</a></li>
<li>· <a href="http://www.okajax.com/a/200808/0RX0252008.html" target="_blank">本例官方地址</a>1</li>
<li>· <a href="http://www.okajax.com/a/200808/0RX0252008.html" target="_blank">本例官方地址1</a></li>
</ul>
<ul class="left_box disable" id="jy_con2">
<li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">本例交流地址2</a></li>
<li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">本例交流地址2</a></li><li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">本例交流地址2</a></li><li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">本例交流地址2</a></li>
<li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">Exchange address 2 in this example</a></ li><li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">This example exchange address 2</a>&lt ;/li><li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">Exchange address 2 in this example</a&gt ;</li><li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">This example exchange address 2< /a></li><li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">Exchange address in this example 2</a></li><li>· <a href="http://bbs.okajax.com/thread-5566-1-1.html" target="_blank">This example Communication address 2</a></li>
</ul>
<ul class="left_box disable" id="jy_con3">
<li>· <a href="/Bbs/Exchange/20080725/33967.html" target="_blank">A public examination forum with 250,000 members, seeking cooperation</a></li><li>· <a href ="/Bbs/Exchange/20080722/33771.html" target="_blank">Looking for forum promotion experts</a></li><li>· <a href="/Bbs/Exchange/ 20080718/33476.html" target="_blank"> Looking for cooperation with music webmasters or moderators, high basic salary</a></li><li>· <a href="/Bbs/Exchange /20080707/32447.html" target="_blank">Xiamen North Latitude Information is recruiting agents at all levels</a></li><li>· <a href="/Bbs/Exchange/20080603 /30550.html" target="_blank">Regular potential website, looking for partners</a></li><li>· <a href="/Bbs/Exchange/20080603/30544.html " target="_blank">Personal Xeon 2.8 dual-core idle server is looking for cooperation!</a></li><li>· <a href="/Bbs/Exchange/20080603/30543.html " target="_blank"> Looking for friends who are interested in financial stocks to cooperate in building a website</a></li><li>· <a href="/Bbs/Exchange/20080527/30057.html " target="_blank">Sincerely looking for website cooperation</a></li><li>· <a href="/Bbs/Exchange/20080523/29767.html" target="_blank"> ;Idle server space recruiting partner IP>Three Thousand</a></li><li>· <a href="/Bbs/Exchange/20080521/29599.html" target="_blank"> Change the advertising space to create a novel website</a></li>
</ul>
<ul class="left_box disable" id="jy_con4">
<li>· <a href="/Bbs/Exchange/20080820/35679.html" target="_blank">nb.la Absolutely awesome rice for sale</a></li><li> ;· <a href="/Bbs/Exchange/20080820/35677.html" target="_blank">chaozuo.com Hype for sale at 50,000</a></li><li>· < a href="/Bbs/Exchange/20080820/35676.html" target="_blank">766.net 3-digit good rice for sale</a></li><li>· <a href ="/Bbs/Exchange/20080820/35674.html" target="_blank">Industry and corporate domain names for sale</a></li><li>· <a href="/Bbs/Exchange /20080820/35673.html" target="_blank">The requirement for receiving download site corn is PR3 or above</a></li><li>· <a href="/Bbs/Exchange/20080820/35671 .html" target="_blank">For Sale BJJB.CN</a></li><li>· <a href="/Bbs/Exchange/20080820/35670.html" target="_blank" >xindf.com New Oriental for sale</a></li><li>· <a href="/Bbs/Exchange/20080815/35378.html" target="_blank">For sale 51wan.la (I want to play)</a></li><li>· <a href="/Bbs/Exchange/20080815/35377.html" target="_blank">Guangdong Portal Mi Gdeol. comfor sale</a></li><li>· <a href="/Bbs/Exchange/20080815/35375.html" target="_blank">www.117.hkfor sale</ a></li>
</ul>
<ul class="left_box disable" id="jy_con5">
<li>· <a href="/Bbs /Exchange/20080815/35381.html" target="_blank">Sell online earning forum data plus space plus domain name</a></li><li>· <a href="/Bbs/Exchange /20080725/33970.html" target="_blank">1.6WIP 5-7WPV novel download website for sale</a></li><li>· <a href="/Bbs/Exchange/20080715 /33141.html" target="_blank">logo house entire site for sale</a></li><li>· <a href="/Bbs/Exchange/20080618/31279.html" target="_blank">Transfer a Shanghai Zhenru computer room for 5 months of hosting</a></li><li>· <a href="/Bbs/Exchange/20080530/30387.html" target= "_blank">Selling a forum with nearly 20,000 PR posts</a></li><li>· <a href="/Bbs/Exchange/20080530/30386.html" target ="_blank">New site for sale! [China WEB Technology]</a></li><li>· <a href="/Bbs/Exchange/20080528/30200.html" target="_blank">Alliance domain name for sale (change of career) </a></li><li>· <a href="/Bbs/Exchange/20080528/30199.html" target="_blank">Fashion website for sale</a>< /li><li>· <a href="/Bbs/Exchange/20080527/30059.html" target="_blank">Looking for a WAP mobile website! </a></li><li>· <a href="/Bbs/Exchange/20080526/29926.html" target="_blank">Chengdu local portal sells DMOZ 3-year history</ a></li>
</ul>
<ul class="left_box disable" id="jy_con6">
<li>· <a href="/Bbs/Exchange/20080815/35386.html" target="_blank">Shanghai Data Recruitment IDC Sales Engineer</a></li><li>· <a href="/Bbs/Exchange/20080815/35385.html" target="_blank">Emergency recruitment of part-time female posters</a></li><li>· <a href == "/Bbs/Exchange/20080708/32566.html" target="_blank">Job hunting: Manual posting promotion website</a></li><li>· <a href="/Bbs/Exchange /20080708/32556.html" target="_blank">North Latitude Information Recruitment Sales Engineer</a></li><li>· <a href="/Bbs/Exchange/20080708/32555.html " target="_blank">Recruiting website product manager - Beijing</a></li><li>· <a href="/Bbs/Exchange/20080708/32550.html" target=" _blank">Xi'an is recruiting PHP programmers and website artists</a></li><li>· <a href="/Bbs/Exchange/20080611/30892.html" target="_blank"&gt ;Urgently looking for an ASP website developer (Shanghai)</a></li><li>· <a href="/Bbs/Exchange/20080530/30384.html" target="_blank"&gt ;Recruiting ASP programmers and artists</a></li><li>· <a href="/Bbs/Exchange/20080530/30383.html" target="_blank">Xi'an Internet Company Recruitment Network Programmer</a></li>
</ul>
<ul class="left_box disable" id="jy_con7">
<li>· &lt ;a href="/Bbs/Exchange/20080619/31309.html" target="_blank">Ask someone to imitate the 17tech DEDecms template</a></li><li>· <a href=" /Bbs/Exchange/20080611/30890.html" target="_blank">500 yuan to build a website, please contact us quickly</a></li><li>· <a href="/ Bbs/Exchange/20080528/30208.html" target="_blank">Want to customize a grid shop program</a></li><li>· <a href="/Bbs/Exchange/20080528 /30194.html" target="_blank">Looking for someone to build a foreign trade e-commerce website</a></li><li>· <a href="/Bbs/Exchange/20080526/29930.html " target="_blank">Customize a website like www.1d.com</a></li><li>· <a href="/Bbs/Exchange/20080523/29778.html" target="_blank">Sincerely accept all kinds of websites with full FLASH interactive ASP</a></li><li>· <a href="/Bbs/Exchange/20080522/29701.html" target=" _blank">Emergencyly looking for someone to outsource the localization of 1,000 flash games</a></li><li>· <a href="/Bbs/Exchange/20080522/29653.html" target="_blank" >Looking for someone to build 2 websites, hoping to find technicians to cooperate</a></li><li>· <a href="/Bbs/Exchange/20080519/29374.html" target="_blank" >Please ask for the driving school science simulation test program! ! </a></li><li>· <a href="/Bbs/Exchange/20080519/29373.html" target="_blank">Pay a friend to help with dz6.0 payment Plug-in</a></li>
</ul>
<ul class="left_box disable" id="jy_con8">
<li>· <a href="/Bbs/Exchange/20080725/33973.html" target="_blank">Undertake VI LOGO logo advertising graphic design</a></li><li> · <a href="/Bbs/Exchange/20080725/33972.html" target="_blank">SHOPEX business template only costs 50 yuan</a></li><li>· <a href="/Bbs/Exchange/20080707/32448.html" target="_blank">Website design and production bidding: interested parties please quote</a></li><li>· <a href= "/Bbs/Exchange/20080620/31422.html" target="_blank">Remuneration for English website masters to design LOGO 300</a></li><li>· <a href="/Bbs/Exchange /20080603/30558.html" target="_blank">Free design of LOGO for 88*31 website</a></li><li>· <a href="/Bbs/Exchange/20080603/30557 .html" target="_blank"> Pay RMB to hire someone to make a movie website! Enter if you are able! </a></li><li>· <a href="/Bbs/Exchange/20080521/29593.html" target="_blank">One thousand yuan to hire someone to design the website, including LOGO< /a></li><li>· <a href="/Bbs/Exchange/20080521/29580.html" target="_blank">I specialize in website design and production</a>< /li><li>· <a href="/Bbs/Exchange/20080521/29578.html" target="_blank">DEDE template DIV CSS can also be used urgently</a></li&gt ;<li>· <a href="/Bbs/Exchange/20080513/28973.html" target="_blank">50 yuan to create an HTML page</a></li>
</ul>
</div>
</div>
</body>
</html>

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn