注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

面包会有的

...

 
 
 

日志

 
 

帝国自带的选项卡tabs.js  

2012-12-28 19:01:26|  分类: 帝国cms |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

帝国自带的选项卡,超过十项就无反应了,今天改了一下,支持更多

帝国自带的选项卡tabs.js - 加菲 - 加菲猫

 

这样11个都正常

有空到我网站上看看,在百度搜 飞猪网  或者 飞猪农业网

function tabit(btn){
 var idname = new String(btn.id);
 var s = idname.indexOf("_");
 var e = idname.lastIndexOf("_")+1;
 var tabName = idname.substr(0, s);
 var id = parseInt(idname.substr(e, 2));//原先为1,改为2
 var tabNumber = btn.parentNode.childNodes.length;
 for(i=0;i<tabNumber;i++){
   //document.getElementById(tabName+"_div_"+i).style.display = "none";
   document.getElementById(tabName+"_btn_"+i).className = "";
  };
  //document.getElementById(tabName+"_div_"+id).style.display = "block";
  btn.className = "curr";
};

function etabit(btn){
 var idname = new String(btn.id);
 var s = idname.indexOf("_");
 var e = idname.lastIndexOf("_")+1;
 var tabName = idname.substr(0, s);
 var id = parseInt(idname.substr(e, 2));//原先为1,改为2

 var tabNumber = btn.parentNode.childNodes.length;
 for(i=0;i<tabNumber;i++){
   document.getElementById(tabName+"_div_"+i).style.display = "none";
   document.getElementById(tabName+"_btn_"+i).className = "";
  };
  document.getElementById(tabName+"_div_"+id).style.display = "block";
  btn.className = "curr";
};

只要将注释处的代码从1改为2即可。
从网上查了一点相关的解释:
parseInt(number,type)这个函数后面如果不跟第2个参数来表示进制的话,默认是10进制。  parseInt("10")==>parseInt("010",10)===>10  parseInt("010")==>parseInt("010",8)==>8  parseInt("0x10")==>parseInt("010",16)==>16.  
String.substring(start,end) 这个就有点特别了,它是先从start,end里找出一个较小的值. 然后从字符串的开始位置算起,截取较小值位置和较大值位置之间的字符串,截取出来的字符串的长度为较大值与较小值之间的差。

JavaScript 中 slice 、substr 和 substring的区别:
1: String.slice(start,end): 一个新的字符串。包括字符串 stringObject 从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符.
2: String.substring(start,end) 这个就有点特别了,它是先从start,end里找出一个较小的值. 然后从字符串的开始位置算起,截取较小值位置和较大值位置之间的
    字符串,截取出来的字符串的长度为较大值与较小值之间的差。
    一个新的字符串,该字符串值包含 stringObject 的一个子字符串,其内容是从 start 处到 stop-1 处的所有字符,其长度为 stop 减 start。
3: String.substr(start,end)  这个就是我们常用的从指定的位置(start)截取指定长度(end)的字符串.
    一个新的字符串,包含从 stringObject 的 start(包括 start 所指的字符) 处开始的 lenght 个字符。如果没有指定 lenght,那么返回的字符串包含从 start
    到 stringObject 的结尾的字符。

String 对象的方法 slice()、substring() 和 substr()  (不建议使用)都可返回字符串的指定部分。slice() 比 substring() 要灵活一些,因为它允许使用负数作为参数。slice() 与 substr() 有所不同,因为它用两个字符的位置来指定子串,而 substr() 则用字符位置和长度来指定子串。

JavaScript 中 indexOflastIndexOf 的区别:
1: String.indexOf(searchvalue,fromindex): 该方法将从头到尾地检索字符串 stringObject,看它是否含有子串 searchvalue。开始检索的位置在字符串的
    fromindex 处或字符串的开头(没有指定 fromindex 时)。如果找到一个 searchvalue,则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位
    置是从 0 开始的。
2: String.lastIndexOf (searchvalue,fromindex): 该方法将从尾到头地检索字符串 stringObject,看它是否含有子串 searchvalue。开始检索的位置在字符串的
    fromindex 处或字符串的结尾(没有指定 fromindex 时)。如果找到一个 searchvalue,则返回 searchvalue 的第一个字符在 stringObject 中的位置。
    stringObject 中的字符位置是从 0 开始的

大概意思是这样的:

鼠标移到表头某项时,触发函数onmouseover="etabit(this)",传入this(这个代表指针吗),根据this创建一个String对象,然后分析这个String对象,从中获取_的两个位置值,并截取出第一个_前的部分,作为tabName,并截取第二个_后的部分解析成数字id,并获取父元素的子节点数,然后循环,除了当前的显示外,其它的样式全设置为隐藏。

 

附上完整的测试代码text.html及tabs.js,二者放同一文件夹下即可。

text.html

<style type="text/css">
<!--

/* tab选项卡 宽版 始 (用于首页中间) */

.tbtncon_gq_class {

 height:26px;

 background:url(/skin/default/images/bg_classtitle.jpg) repeat-x;

 white-space:nowrap;   /*限制在一行内显示所有文本*/

 overflow:hidden;

}

.tbtn1_1 {

 font-size:12px;

 font-weight:normal;

 height:26px;

 border:1px solid #E6C9A9;

}

.tbtncon_gq_class li{

 border:1px solid #E6C9A9;

 border-left:none;

 border-top:none;

 color:#760B13;

 

 display:block;

 float:left;

 text-align:center;

 text-decoration:none;

 width:89px;

 height:25px;

 line-height:25px;font-weight: bold;letter-spacing: 1px;

}

.tbtncon_gq_class li:hover{

 text-decoration:underline;

}

.tbtncon_gq_class li.curr{

 background:#fff;

 border-bottom-color:#fff;

 

}

.tbtncon_gq_class li.other{

 border:1px solid #E6C9A9;

 border-left:none;

 border-top:none;

 border-right:none;

 color:#760B13; 

 display:block;

 float:left;

 text-align:center;

 text-decoration:none;

 width:269px;

 height:25px;

 line-height:25px;font-weight: bold;letter-spacing: 1px;

}

/* tab选项卡 宽版 尾 */

 

/* 选项卡 宽版 切换标签上的链接 */

.tbtncon a:link {

 height:25;line-height: 25px;font-size: 14px; color: #6B0900; font-family: "宋体";font-weight:bold;TEXT-DECORATION: none;test:expression(target="_blank"); letter-spacing: 1px;

}

.tbtncon a:visited {

 height:25;line-height: 25px;font-size: 14px; color: #6B0900; font-family: "宋体";font-weight:bold;TEXT-DECORATION: none;test:expression(target="_blank"); letter-spacing: 1px;

}

.tbtncon a:hover {

 height:25;line-height: 25px;font-size: 14px; color: #FF0000; font-family: "宋体";font-weight:bold;TEXT-DECORATION: none;test:expression(target="_blank"); letter-spacing: 1px;

}

.tbtncon a:active {

 height:25;line-height: 25px;font-size: 14px; color: #760B13; font-family: "宋体";font-weight:bold;TEXT-DECORATION: none;test:expression(target="_blank"); letter-spacing: 1px;

}


-->
</style>

<script type="text/javascript" src="tabs.js"></script>

    <!-- tab选项卡2,默认为点击变化,如需改为移动,将onmouseover改为onclick -->
    <div style="width:1500px;height:30px;overflow:hidden;">

     <div class="tbtncon_gq_class">
      <ul>
      <li class="curr" id="tab2_btn_0" onmouseover="etabit(this)">推荐0</li>
      <li id="tab2_btn_1" onmouseover="etabit(this)">推荐1</li>
      <li id="tab2_btn_2" onmouseover="etabit(this)">推荐2</li>
      <li id="tab2_btn_3" onmouseover="etabit(this)">推荐3</li>
      <li id="tab2_btn_4" onmouseover="etabit(this)">推荐4</li>
      <li id="tab2_btn_5" onmouseover="etabit(this)">推荐5</li>
      <li id="tab2_btn_6" onmouseover="etabit(this)">推荐6</li>
      <li id="tab2_btn_7" onmouseover="etabit(this)">推荐7</li>
      <li id="tab2_btn_8" onmouseover="etabit(this)">推荐8</li>
      <li id="tab2_btn_9" onmouseover="etabit(this)">推荐9</li>
      <li id="tab2_btn_10" onmouseover="etabit(this)">推荐10</li>
      <li id="tab2_btn_11" onmouseover="etabit(this)">推荐11</li>

      </ul>
     </div>
    </div>
  

    <div style="width:240px;height:190px;padding:10px;overflow:hidden;" class="rightlist" >
     <div id="tab2_div_0">

      <div>
       <ul class="rightullist" >
        <li>2011年国家支持粮食增产、农民增收的 </li>
        <li>2011年国家支持粮食增产、农民增收的</li>
        <li>2011年国家支持粮食增产、农民增收的</li>
        <li>2011年国家支持粮食增产、农民增收的</li>
        <li>2011年国家支持粮食增产、农民增收的</li>
       </ul>
      </div>


     </div>
     <div id="tab2_div_1" style="display:none;">
      <div>
       <ul class="rightullist" >
        <li>沭阳农民大赚生态钞票</li>
        <li>沭阳农民大赚生态钞票</li>
        <li>沭阳农民大赚生态钞票</li>
       </ul>
      </div>
     </div>
     <div id="tab2_div_2" style="display:none;" class="rightlist" >
      <div>
       <ul class="rightullist" >
        <li>美国农民的生活 </li>

       </ul>
      </div>
     </div>
     <div id="tab2_div_3" style="display:none;" class="rightlist" >
      <div>
       <ul class="rightullist" >
        <li>美国农民的生活3 </li>

       </ul>
      </div>
     </div>
     <div id="tab2_div_4" style="display:none;" class="rightlist" >
      <div>
       <ul class="rightullist" >
        <li>美国农民的生活4 </li>

       </ul>
      </div>
     </div>
     <div id="tab2_div_5" style="display:none;" class="rightlist" >
      <div>
       <ul class="rightullist" >
        <li>美国农民的生活5 </li>

       </ul>
      </div>
     </div>
     <div id="tab2_div_6" style="display:none;" class="rightlist" >
      <div>
       <ul class="rightullist" >
        <li>美国农民的生活6 </li>

       </ul>
      </div>
     </div>
     <div id="tab2_div_7" style="display:none;" class="rightlist" >
      <div>
       <ul class="rightullist" >
        <li>美国农民的生活7 </li>

       </ul>
      </div>
     </div>
     <div id="tab2_div_8" style="display:none;" class="rightlist" >
      <div>
       <ul class="rightullist" >
        <li>美国农民的生活8 </li>

       </ul>
      </div>
     </div>
     <div id="tab2_div_9" style="display:none;" class="rightlist" >
      <div>
       <ul class="rightullist" >
        <li>美国农民的生活9 </li>

       </ul>
      </div>
     </div>
     <div id="tab2_div_10" style="display:none;" class="rightlist" >
      <div>
       <ul class="rightullist" >
        <li>美国农民的生活10 </li>

       </ul>
      </div>
     </div>
     <div id="tab2_div_11" style="display:none;" class="rightlist" >
      <div>
       <ul class="rightullist" >
        <li>美国农民的生活11 </li>

       </ul>
      </div>
     </div>


    </div>

 


tabs.js

 

function tabit(btn){
 var idname = new String(btn.id);
 var s = idname.indexOf("_");
 var e = idname.lastIndexOf("_")+1;
 var tabName = idname.substr(0, s);
 var id = parseInt(idname.substr(e, 2));
 var tabNumber = btn.parentNode.childNodes.length;
 for(i=0;i<tabNumber;i++){
   //document.getElementById(tabName+"_div_"+i).style.display = "none";
   document.getElementById(tabName+"_btn_"+i).className = "";
  };
  //document.getElementById(tabName+"_div_"+id).style.display = "block";
  btn.className = "curr";
};

function etabit(btn){
 var idname = new String(btn.id);
 var s = idname.indexOf("_");
 var e = idname.lastIndexOf("_")+1;
 var tabName = idname.substr(0, s);
 var id = parseInt(idname.substr(e, 2));
 var tabNumber = btn.parentNode.childNodes.length;
 for(i=0;i<tabNumber;i++){
   document.getElementById(tabName+"_div_"+i).style.display = "none";
   document.getElementById(tabName+"_btn_"+i).className = "";
  };
  document.getElementById(tabName+"_div_"+id).style.display = "block";
  btn.className = "curr";
};



 

  评论这张
 
阅读(2029)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017