关于一个滑动选项卡的问题,哪位大哥帮忙改一下呀。

bigspook 2014-02-13 01:40:54
由于标签数量有点多,想把标签分布在DIV的两侧,同时保留滑动效果,哪位大哥、高手、好朋友、亲。。。帮忙改一下啊,或者指点一下思路、方法,不过我是新手,别整太高深嘀,谢谢啊。
想实现的效果如下图:


代码如下:


<!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 cls_tab_nav_li_first"><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>
</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>
...全文
129 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
Go 旅城通票 2014-02-14
  • 打赏
  • 举报
回复
需要修改样式
<!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{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>
Go 旅城通票 2014-02-13
  • 打赏
  • 举报
回复
tab的容器滚动就好了吧。。要不更加多的tab,你下面也放完了怎么搞
<!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;}
.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>
bigspook 2014-02-13
  • 打赏
  • 举报
回复
但是标签四和五滑动不了啊。。。
KeepSayingNo 2014-02-13
  • 打赏
  • 举报
回复

<!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>


显示的结果和你需求一致

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧