<!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>滑动门</title>
<style>
#tab_container1{width:400px;text-align:left;border:0px ;background:url() repeat-x top;border: 1px solid #DEDEDE; padding:10px;}
.cls_tab_nav{height:35px;overflow:hidden;font-size:12px; background:url() repeat-x bottom; padding-left:10px; font-weight:bolder;}
.cls_tab_nav ul{font-size:12px;margin:0;padding:0; font-weight:bolder; }
.cls_tab_nav_li{background:url(images/k_01.png) no-repeat -100px 0;width:100px;height:35px;line-height:35px;float:left;display:inline;overflow:hidden;text-align:center;cursor:pointer; font-weight:bolder;}
.cls_tab_nav_li_first{font-weight:bolder;background-position:0px 0px;}
.cls_tab_nav_li a{text-decoration:none;color:#1d4b6e;font-size:12px; font-weight:bolder;}
.cls_tab_body{border-top:none;min-height:175px;padding:0px;}
.cls_div{display:none;font-size:12px;}
.cls_tab_nav_li_first a{color:#ffffff;}
</style>
</head>
<body>
<div id="tab_container1" >
<div class="cls_tab_nav">
<ul>
<li class="cls_tab_nav_li"><a href="#">标签一</a></li>
<li class="cls_tab_nav_li"><a href="#">标签二</a></li>
<li class="cls_tab_nav_li"><a href="#">标签三</a></li>
</ul>
</div>
<div class="cls_tab_body">
<div class="cls_div" style="display:block; border-top:2px solid #71a0c0; padding-top:10px;">
1111111111111111111111
</div>
<div class="cls_div" style="border-top:2px solid #71a0c0; padding-top:10px;">
22222222222222222
</div>
</div>
<div class="cls_tab_nav">
<ul>
<li class="cls_tab_nav_li"><a href="#">标签四</a></li>
<li class="cls_tab_nav_li"><a href="#">标签五</a></li>
</ul>
</div>
</div>
</body>
</html>
<script type="text/javascript">
try{
document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
function $(element){
if(arguments.length>1){
for(var i=0,elements=[],length=arguments.length;i<length;i++)
elements.push($(arguments[i]));
return elements;
}
if(typeof element=="string")
return document.getElementById(element);
else
return element;
}
var Class={
create:function(){
return function(){
this.initialize.apply(this,arguments);
}
}
}
Object.extend=function(destination,source){
for(var property in source){
destination[property]=source[property];
}
return destination;
}
var tabMenu=Class.create();
tabMenu.prototype={
initialize:function(container,selfOpt,otherOpt){
this.container=$(container);
var selfOptions=Object.extend({fontWeight:"bold",fontSize:"12px",color:"#FFBC44"},selfOpt||{});
var otherOptions=Object.extend({fontWeight:"normal",fontSize:"12px",color:"#666"},otherOpt||{});
//用for循环得到objs数组,主要是为了兼容非IE浏览器把空白也当作子对象
for(var i=0,length=this.container.childNodes.length,objs=[];i<length;i++){
if(this.container.childNodes[i].nodeType==1)
objs.push(this.container.childNodes[i]);
}
var tabArray=objs[0].getElementsByTagName("li");
//用for循环得到divArray数组,主要是为了兼容非IE浏览器把空白也当作子对象
var divArray=new Array();
for(i=0,length=objs[1].childNodes.length;i<length;i++){
if(objs[1].childNodes[i].nodeType==1)
divArray.push(objs[1].childNodes[i]);
}
for(i=0,length=tabArray.length;i<length;i++){
tabArray[i].length=length;
tabArray[i].index=i;
tabArray[i].onmouseover=function(){
//其它选项卡样式设置
for(var j=0;j<this.length;j++){
tabArray[j].style.backgroundPosition="-"+tabArray[j].offsetWidth+"px 0";
for(var property in selfOptions){
tabArray[j].firstChild.style[property]=otherOptions[property];
}
}
//当前选项卡样式
this.style.backgroundPosition="0 0";
for(var property in selfOptions){
this.firstChild.style[property]=selfOptions[property];
}
//隐藏其它选项卡
for(j=0;j<this.length;j++){
divArray[j].style.display="none";
}
//显示当前选项卡
divArray[this.index].style["display"]="block";
}
}
}
}
var tab1=new tabMenu("tab_container1",{fontSize:"12px",color:"#ffffff",fontWeight:"bolder"},{fontWeight:"bolder",color:"#1d4b6e"});
</script>
显示的结果和你需求一致
解决方案 »
- 求easyui ie7 下兼容性问题
- 大家帮我想想办法贝
- 谁有比较好的树形菜单+类似IE8标签
- 火狐下文件上传的时候遇到的问题
- table表格运行时出错,提示由于该控件目前不可见.......
- 匿名类的语法问题
- 在javascrip 函数里如何得到<%=Rs.Fields.Item("id").Value%>的值?
- 关于JavaScript引起非法操作的问题.
- 关于修改prototype 原型污染的问题，求解
- 敲了一晚上！为什么我两个函数运行不起来？！主要是setInterval('timer()',100);setInterval('runClock()',100)
- 点击展开、折叠，只在谷歌浏览器里管用，为什么？
- 求解读关于瀑布流加载的JS代码问题？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>滑动门</title>
<style>
#tab_container1{width:400px;text-align:left;border:0px ;background:url() repeat-x top;border: 1px solid #DEDEDE; padding:10px;}
.tabs_nav{position:relative}
.tabs_nav a.left,.tabs_nav a.right{position:absolute;left:0px;font-weight:bold;text-decoration:none;line-height:35px;background:#fff}
.tabs_nav a.right{left:auto;right:0px}
.cls_tab_nav{height:35px;overflow:hidden;font-size:12px; background:url() repeat-x bottom; padding:0px 10px; font-weight:bolder;}
.cls_tab_nav ul{font-size:12px;margin:0;padding:0; font-weight:bolder;width:100000px }
.cls_tab_nav_li{background:url(images/k_01.png) no-repeat -100px 0;width:100px;height:35px;line-height:35px;float:left;display:inline;overflow:hidden;text-align:center;cursor:pointer; font-weight:bolder;}
.cls_tab_nav_li_first{font-weight:bolder;background-position:0px 0px;}
.cls_tab_nav_li a{text-decoration:none;color:#1d4b6e;font-size:12px; font-weight:bolder;}
.cls_tab_body{border-top:none;min-height:175px;padding:0px;}
.cls_div{display:none;font-size:12px;}
.cls_tab_nav_li_first a{color:#f00;}
</style>
</head>
<body>
<div id="tab_container1" >
<div class="tabs_nav"><a href="#" class="left"><</a><a href="#" class="right">></a><div class="cls_tab_nav">
<ul>
<li class="cls_tab_nav_li cls_tab_nav_li_first"><a href="#">标签一</a></li>
<li class="cls_tab_nav_li"><a href="#">标签二</a></li>
<li class="cls_tab_nav_li"><a href="#">标签三</a></li>
<li class="cls_tab_nav_li"><a href="#">标签四</a></li>
<li class="cls_tab_nav_li"><a href="#">标签五</a></li>
</ul>
</div></div>
<div class="cls_tab_body">
<div class="cls_div" style="display:block; border-top:2px solid #71a0c0; padding-top:10px;">
1111111111111111111111
</div>
<div class="cls_div" style="border-top:2px solid #71a0c0; padding-top:10px;">
22222222222222222
</div>
<div class="cls_div" style="border-top:2px solid #71a0c0; padding-top:10px;">
333333
</div>
<div class="cls_div" style="border-top:2px solid #71a0c0; padding-top:10px;">
444444444
</div>
<div class="cls_div" style="border-top:2px solid #71a0c0; padding-top:10px;">
555555555555
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
try {
document.execCommand("BackgroundImageCache", false, true);
} catch (e) { }
function $(element) {
if (arguments.length > 1) {
for (var i = 0, elements = [], length = arguments.length; i < length; i++)
elements.push($(arguments[i]));
return elements;
}
if (typeof element == "string")
return document.getElementById(element);
else
return element;
}
var Class = {
create: function () {
return function () {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function (destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
var tabMenu = Class.create();
tabMenu.prototype = {
initialize: function (container, selfOpt, otherOpt) {
this.container = $(container);
var selfOptions = Object.extend({ fontWeight: "bold", fontSize: "12px", color: "#FFBC44" }, selfOpt || {});
var otherOptions = Object.extend({ fontWeight: "normal", fontSize: "12px", color: "#666" }, otherOpt || {});
//用for循环得到objs数组,主要是为了兼容非IE浏览器把空白也当作子对象
for (var i = 0, length = this.container.childNodes.length, objs = []; i < length; i++) {
if (this.container.childNodes[i].nodeType == 1)
objs.push(this.container.childNodes[i]);
}
var tabArray = objs[0].getElementsByTagName("li");
var tabContainer = tabArray[0].parentNode.parentNode; //tab的容器
var arrows = objs[0].getElementsByTagName('a');
var tabWidth = 100; //你定义的tab宽度
tabArray[0].parentNode.style.width = tabArray.length * tabWidth + 'px';
//给导航绑定事件
arrows[0].onclick = arrows[1].onclick = function (e) {
tabContainer.scrollLeft += this.className == 'left' ? -tabWidth : tabWidth;
return false
}
//用for循环得到divArray数组,主要是为了兼容非IE浏览器把空白也当作子对象
var divArray = new Array();
for (i = 0, length = objs[1].childNodes.length; i < length; i++) {
if (objs[1].childNodes[i].nodeType == 1)
divArray.push(objs[1].childNodes[i]);
} for (i = 0, length = tabArray.length; i < length; i++) {
tabArray[i].length = length;
tabArray[i].index = i;
tabArray[i].onmouseover = function () {
//其它选项卡样式设置
for (var j = 0; j < this.length; j++) {
tabArray[j].style.backgroundPosition = "-" + tabArray[j].offsetWidth + "px 0";
for (var property in selfOptions) {
tabArray[j].firstChild.style[property] = otherOptions[property];
}
}
//当前选项卡样式
this.style.backgroundPosition = "0 0";
for (var property in selfOptions) {
this.firstChild.style[property] = selfOptions[property];
}
//隐藏其它选项卡
for (j = 0; j < this.length; j++) {
divArray[j].style.display = "none";
}
//显示当前选项卡
divArray[this.index].style["display"] = "block";
}
}
}
}
var tab1 = new tabMenu("tab_container1", { fontSize: "12px", color: "#f00", fontWeight: "bolder" }, { fontWeight: "bolder", color: "#1d4b6e" });
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>滑动门</title>
<style>
#tab_container1{height:400px;text-align:left;border:0px ;background:url() repeat-x top;border: 1px solid #DEDEDE; padding:10px;overflow:hidden;zoom:1}
.tabs_nav{position:relative;float:left}
.tabs_nav a.left,.tabs_nav a.right{position:absolute;left:4px;font-weight:bold;text-decoration:none;background:#fff;font-size:12px}
.tabs_nav a.right{top:390px;}
.cls_tab_nav{width:18px;overflow:hidden;font-size:12px; background:url() repeat-x bottom; font-weight:bolder;height:380px}
.cls_tab_nav li table{vertical-align:middle;height:100px}
.cls_tab_nav ul{font-size:12px;margin:0;padding:0; font-weight:bolder;height:100000px }
.cls_tab_nav_li{background:url(images/k_01.png) no-repeat -100px 0;height:100px;line-height:20px;float:left;display:inline;overflow:hidden;text-align:center;cursor:pointer; font-weight:bolder;}
.cls_tab_nav_li_first{font-weight:bolder;background-position:0px 0px;}
.cls_tab_nav_li a{text-decoration:none;color:#1d4b6e;font-size:12px; font-weight:bolder;}
.cls_tab_body{min-height:175px;padding:0px;margin-left:40px;height:100%;border-left:2px solid #71a0c0;}
.cls_div{display:none;font-size:12px; padding-left:10px;}
.cls_tab_nav_li_first a{color:#f00;}
</style>
</head>
<body>
<div id="tab_container1" >
<div class="tabs_nav"><a href="#" class="left">∧</a><a href="#" class="right">∨</a><div class="cls_tab_nav">
<ul>
<li class="cls_tab_nav_li cls_tab_nav_li_first"><table><tr><td><a href="#">标签一</a></td></tr></table></li>
<li class="cls_tab_nav_li"><table><tr><td><a href="#">标签二</a></td></tr></table></li>
<li class="cls_tab_nav_li"><table><tr><td><a href="#">标签三</a></td></tr></table></li>
<li class="cls_tab_nav_li"><table><tr><td><a href="#">标签四</a></td></tr></table></li>
<li class="cls_tab_nav_li"><table><tr><td><a href="#">标签五</a></td></tr></table></li>
</ul>
</div></div>
<div class="cls_tab_body">
<div class="cls_div" style="display:block;">
1111111111111111111111
</div>
<div class="cls_div">
22222222222222222
</div>
<div class="cls_div">
333333
</div>
<div class="cls_div">
444444444
</div>
<div class="cls_div" >
555555555555
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
try {
document.execCommand("BackgroundImageCache", false, true);
} catch (e) { }
function $(element) {
if (arguments.length > 1) {
for (var i = 0, elements = [], length = arguments.length; i < length; i++)
elements.push($(arguments[i]));
return elements;
}
if (typeof element == "string")
return document.getElementById(element);
else
return element;
}
var Class = {
create: function () {
return function () {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function (destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
var tabMenu = Class.create();
tabMenu.prototype = {
initialize: function (container, selfOpt, otherOpt) {
this.container = $(container);
var selfOptions = Object.extend({ fontWeight: "bold", fontSize: "12px", color: "#FFBC44" }, selfOpt || {});
var otherOptions = Object.extend({ fontWeight: "normal", fontSize: "12px", color: "#666" }, otherOpt || {});
//用for循环得到objs数组,主要是为了兼容非IE浏览器把空白也当作子对象
for (var i = 0, length = this.container.childNodes.length, objs = []; i < length; i++) {
if (this.container.childNodes[i].nodeType == 1)
objs.push(this.container.childNodes[i]);
}
var tabArray = objs[0].getElementsByTagName("li");
var tabContainer = tabArray[0].parentNode.parentNode; //tab的容器
var arrows = objs[0].getElementsByTagName('a');
var tabHeight = 100; //你定义的tab高度
tabArray[0].parentNode.style.height = tabArray.length * tabHeight + 'px';
//给导航绑定事件
arrows[0].onclick = arrows[1].onclick = function (e) {
tabContainer.scrollTop += this.className == 'left' ? -tabHeight : tabHeight;
return false
}
//用for循环得到divArray数组,主要是为了兼容非IE浏览器把空白也当作子对象
var divArray = new Array();
for (i = 0, length = objs[1].childNodes.length; i < length; i++) {
if (objs[1].childNodes[i].nodeType == 1)
divArray.push(objs[1].childNodes[i]);
} for (i = 0, length = tabArray.length; i < length; i++) {
tabArray[i].length = length;
tabArray[i].index = i;
tabArray[i].onmouseover = function () {
//其它选项卡样式设置
for (var j = 0; j < this.length; j++) {
tabArray[j].style.backgroundPosition = "-" + tabArray[j].offsetWidth + "px 0";
for (var property in selfOptions) {
tabArray[j].firstChild.style[property] = otherOptions[property];
}
}
//当前选项卡样式
this.style.backgroundPosition = "0 0";
for (var property in selfOptions) {
this.firstChild.style[property] = selfOptions[property];
}
//隐藏其它选项卡
for (j = 0; j < this.length; j++) {
divArray[j].style.display = "none";
}
//显示当前选项卡
divArray[this.index].style["display"] = "block";
}
}
}
}
var tab1 = new tabMenu("tab_container1", { fontSize: "12px", color: "#f00", fontWeight: "bolder" }, { fontWeight: "bolder", color: "#1d4b6e" });
</script>