html小标签页转换,html 页面标签转换效果实例

一个HTML的页面标签转换效果，贴出来。供大家参考

先来一张图

如图，页面的左右两边都可以进行切换。喎�"https://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+tPrC67rcvPK1paOsytfPyNDo0qpqcXVhcnm1xGpzoaM8L3A+CjxwPtb30qpIVE1MtPrC66O6PC9wPgo8cD48cHJlIGNsYXNzPQ=="brush:java;">

信息

数据

曲线

地图

主要js代码：

// When the document loads do everything inside here ...

$(document).ready(function(){

// When a link is clicked

$("a.tab").click(function () {

// switch all tabs off

$(".active").removeClass("active");

// switch this tab on

$(this).addClass("active");

// slide all content up

$(".content").slideUp();

// slide this content up

var content_show = $(this).attr("title");

$("#"+content_show).slideDown();

});

var vheight = $(window).height();

$("body").height(vheight-70);

$(".content").height(vheight-70);

});

主要css代码：

body {

background-color: #336699;

overflow-y:scroll;

margin-left: 5px;

margin-top: 5px;

margin-right: 5px;

margin-bottom: 5px;

}

#tabbed_box_1 {

margin: 0 auto;

width: 100%;

height:100%;

}

.tabbed_box h4 {

color: #ffffff;

font-family: Arial,Helvetica,sans-serif;

font-size: 23px;

letter-spacing: -1px;

margin-bottom: 10px;

}

.tabbed_box h4 small {

color: #e3e9ec;

font-family: Verdana,Arial,Helvetica,sans-serif;

font-size: 9px;

font-weight: normal;

left: 6px;

letter-spacing: 0;

position: relative;

text-transform: uppercase;

top: -4px;

}

.tabbed_area {

background-color: #336699;

border: 0px solid #494e52;

padding: 8px;

height:100%;

}

ul.tabs {

margin: 5px 0 6px;

padding: 0;

}

ul.tabs li {

display: inline;

list-style: outside none none;

}

ul.tabs li a {

background-color: #464c54;

background-image: url("images/tab_off.jpg");

background-position: center bottom;

background-repeat: repeat-x;

border: 1px solid #464c54;

color: #ffebb5;

font-family: Verdana,Arial,Helvetica,sans-serif;

font-size: 15px;

font-weight: bold;

padding: 8px 14px;

text-decoration: none;

text-transform: uppercase;

}

ul.tabs li a:hover {

background-color: #2f343a;

border-color: #2f343a;

}

ul.tabs li a.active {

-moz-border-bottom-colors: none;

-moz-border-left-colors: none;

-moz-border-right-colors: none;

-moz-border-top-colors: none;

background-color: #ffffff;

background-image: url("images/tab_on.jpg");

background-position: center top;

background-repeat: repeat-x;

border-color: #464c54 #464c54 #ffffff;

border-image: none;

border-style: solid;

border-width: 1px;

color: #282e32;

}

.content {

background-color: #ffffff;

background-image: url("images/content_bottom.jpg");

background-position: center bottom;

background-repeat: repeat-x;

border: 1px solid #464c54;

font-family: Arial,Helvetica,sans-serif;

padding: 10px;

}

#content_2, #content_3,#content_4 {

display: none;

}

.content ul {

margin: 0;

}

.content ul li {

font-size: 13px;

list-style: outside none none;

padding-bottom: 3px;

padding-top: 3px;

}

.content ul li:last-child {

border-bottom: medium none;

}

.content ul li a {

color: #3e4346;

text-decoration: none;

}

.content ul li a small {

color: #8b959c;

font-family: Verdana,Arial,Helvetica,sans-serif;

font-size: 9px;

left: 4px;

position: relative;

text-transform: uppercase;

top: 0;

}

.content ul li a:hover {

color: #a59c83;

}

.content ul li a:hover small {

color: #baae8e;

}这里需要注意标签的开始隐藏在这里需要设置

#content_2, #content_3,#content_4 {

display: none;

}顺便将我右边页面的代码全部贴出

无标题文档

信息

数据

曲线

地图

// When the document loads do everything inside here ...

$(document).ready(function(){

// When a link is clicked

$("a.tab").click(function () {

// switch all tabs off

$(".active").removeClass("active");

// switch this tab on

$(this).addClass("active");

// slide all content up

$(".content").slideUp();

// slide this content up

var content_show = $(this).attr("title");

$("#"+content_show).slideDown();

});

var vheight = $(window).height();

$("body").height(vheight-70);

$(".content").height(vheight-70);

});