js melaksanakan kesan tab penukaran TAB yang boleh dipanggil berulang kali beberapa kali dengan meniru kemahiran list_javascript Billboard Baidu-tutorial js-php.cn

本文实例讲述了js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果。分享给大家供大家参考。具体如下：

这是一款可在同一页面中多次调用的TAB选项卡代码，仿百度风云榜的TAB切换效果，用到了几张修饰图片，请顺着代码下载所需的图片，然后上传到你的网站中，修改代码内的路径就可以用了。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-f-baidu-style-tab-cha-codes/

具体代码如下：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

<!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=utf-8" />
<title>仿百度风云榜TAB切换</title>
<style>
body,div,h5,ul,li{margin:0;padding:0;}
body{font:12px/1.5 Arial;}
li{list-style:none;}
a:link,a:visited{color:#333;text-decoration:none;}
a:hover{text-decoration:underline;}
#wrap{width:836px;border:3px solid #1972C0;border-width:3px 0;margin:10px auto;}
#list{overflow:hidden;zoom:1;margin-left:-10px;}
#wrap .item{display:inline;float:left;width:270px;padding-bottom:10px;border:1px solid #EBEBEB;margin:10px 0 10px 10px;}
#wrap .item .tab{position:relative;height:25px;border-bottom:1px solid #CCC;margin:8px;}
#wrap .item .tab h5{position:absolute;left:10px;font-size:14px;}
#wrap .item .tab .switchBtn{position:absolute;top:3px;right:0;}
#wrap .item .tab .switchBtn a{float:left;width:15px;height:15px;margin-left:5px;overflow:hidden;text-indent:-999px;background:url(images/icon_arr.gif) no-repeat;outline:none;}
#wrap .item .tab .switchBtn a.prev{background-position:0 -25px;}
#wrap .item .tab .switchBtn a.prevNot{background-position:0 0;cursor:default;}
#wrap .item .tab .switchBtn a.next{background-position:right -25px;}
#wrap .item .tab .switchBtn a.nextNot{background-position:right 0;cursor:default;}
#wrap .item .tab ul{position:absolute;top:-2px;left:50px;width:160px;height:28px;overflow:hidden;}
#wrap .item .tab ul li{float:left;cursor:pointer;line-height:26px;padding:0 8px;}
#wrap .item .tab ul li.current{cursor:text;color:#E45E2E;font-weight:700;border:1px solid #CCC;border-bottom-color:#FFF;}
#wrap .item .items{display:none;background:url(images/icon_num.gif) 15px 4px no-repeat;padding:0 15px;}
#wrap .item .items a{color:#3A64B0;}
#wrap .item .items li{height:24px;line-height:24px;padding-left:20px;border-bottom:1px solid #EBEBEB;}
#wrap .item .btn{height:22px;margin-top:10px;}
#wrap .item .btn a{float:right;width:74px;height:22px;overflow:hidden;margin-right:15px;text-indent:-9999px;background:url(images/icon_btn.gif) no-repeat;}
#wrap .item .btn a:hover{background-position:0 -22px;}
#copyright{color:#9A9A9A;text-align:center;}
#copyright a{color:#FFF;padding:2px 5px;border-radius:10px;background:#9A9A9A;}
</style>
<script>
var fgm = {
 $: function(id) {
 return typeof id === "object" &#63; id : document.getElementById(id);
 },
 $$: function(tagName, oParent) {
 return (oParent || document).getElementsByTagName(tagName);
 },
 $$$: function(className, element, tagName) {
 var i = 0, aClass = [], reClass = new RegExp("(^|\\s)" + className + "(\\s|$)"), aElement = fgm.$$(tagName || "*", element || document);
 for (i = 0; i < aElement.length; i++) reClass.test(aElement[i].className) && aClass.push(aElement[i]);
 return aClass;
 },
 index: function(element) {
 var aChildren = element.parentNode.children, i;
 for(i = 0; i < aChildren.length; i++) if(aChildren[i] === element) return i;
 return -1;
 },
 on: function(element, type, handler) {
 return element.addEventListener &#63; element.addEventListener(type, handler, !1) : element.attachEvent("on" + type, handler); 
 },
 bind: function(object, handler) {
 return function() {
 return handler.apply(object, arguments);
 }; 
 }
};
function Tab(id) {
 var that = this;
 this.obj = fgm.$(id);
 this.oTab = fgm.$$$("tab", this.obj)[0];
 this.aTab = fgm.$$("li", this.oTab);
 this.oSwitch = fgm.$$$("switchBtn", this.oTab)[0];
 this.oPrev = fgm.$$("a", this.oSwitch)[0];
 this.oNext = fgm.$$("a", this.oSwitch)[1];
 this.aItems = fgm.$$$("items", this.obj);
 this.iNow = 0; 
 fgm.on(this.oSwitch, "click", fgm.bind(this, this.fnClick));
 fgm.on(this.oTab, "mouseover", fgm.bind(this, this.fnMouseOver));
}
Tab.prototype = {
 fnMouseOver: function(ev) {
 var oEv = ev || event,
 oTarget = oEv.target || oEv.srcElement;
 oTarget.tagName.toUpperCase() === "LI" && (this.iNow = fgm.index(oTarget));
 this.fnSwitch();
 },
 fnClick: function(ev) {
 var oEv = ev || event,
 oTarget = oEv.target || oEv.srcElement,
 i;
 switch(fgm.index(oTarget)) {
 case 0:
 if(oTarget.className == "prev") {
 this.aTab[this.iNow].style.display = "block";
 this.iNow--; 
 };
 break;
 case 1:
 if(oTarget.className == "next") { 
 for(i = 0; i < this.iNow; i++) this.aTab[i].style.display = "none";
 this.iNow++; 
 };
 break;
 };
 this.aTab[this.iNow].style.display = "block"; 
 this.fnSwitch(); 
 },
 fnSwitch: function() {
 for(var i = 0; i < this.aTab.length; i++) (this.aTab[i].className = "", this.aItems[i].style.display = "none"); 
 this.aTab[this.iNow].className = "current";
 this.aItems[this.iNow].style.display = "block";
 this.oPrev.className = this.iNow == 0 &#63; "prevNot" : "prev";
 this.oNext.className = this.iNow == this.aTab.length - 1 &#63; "nextNot" : "next";
 }
};
//应用
fgm.on(window, "load", function() {
 var aItem = fgm.$$$("item"),
 i = 0;
 for(; i < aItem.length; i++) new Tab(aItem[i]);
});
</script>
</head>
<body>
<div id="wrap">
 <div id="list">
 <div class="item">
  <div class="tab">
  <h5><a href="#">教育</a></h5>
  <ul>
   <li class="current">基础教育</li>
   <li>英语培训</li>
  </ul>
  <span class="switchBtn"><a href="javascript:;" class="prevNot">左</a><a href="javascript:;" class="next">右</a></span>
  </div>
  <ul class="items" style="display:block;">
  <li><a href="#">北京四中网校</a></li>
  <li><a href="#">学大教育</a></li>
  <li><a href="#">中国统一教育网</a></li>
  <li><a href="#">101远程教育网</a></li>
  <li><a href="#">巨人教育</a></li>
  <li><a href="#">黄冈中学网校</a></li>
  </ul>
  <ul class="items">
  <li><a href="#">新东方</a></li>
  <li><a href="#">英孚教育</a></li>
  <li><a href="#">环球雅思</a></li>
  <li><a href="#">韦博国际英语</a></li>
  <li><a href="#">华尔街英语</a></li>
  <li><a href="#">新航道</a></li>
  </ul>
  <div class="btn"><a href="#">完整榜单</a></div>
 </div>
 <div class="item">
  <div class="tab">
  <h5><a href="#">教育</a></h5>
  <ul>
   <li class="current">基础教育</li>
   <li>英语培训</li>
  </ul>
  <span class="switchBtn"><a href="javascript:;" class="prevNot">左</a><a href="javascript:;" class="next">右</a></span>
  </div>
  <ul class="items" style="display:block;">
  <li><a href="#">北京四中网校</a></li>
  <li><a href="#">学大教育</a></li>
  <li><a href="#">中国统一教育网</a></li>
  <li><a href="#">101远程教育网</a></li>
  <li><a href="#">巨人教育</a></li>
  <li><a href="#">黄冈中学网校</a></li>
  </ul>
  <ul class="items">
  <li><a href="#">新东方</a></li>
  <li><a href="#">英孚教育</a></li>
  <li><a href="#">环球雅思</a></li>
  <li><a href="#">韦博国际英语</a></li>
  <li><a href="#">华尔街英语</a></li>
  <li><a href="#">新航道</a></li>
  </ul>
  <div class="btn"><a href="#">完整榜单</a></div>
 </div>
 <div class="item">
  <div class="tab">
  <h5><a href="#">教育</a></h5>
  <ul>
   <li class="current">基础教育</li>
   <li>英语培训</li>
  </ul>
  <span class="switchBtn"><a href="javascript:;" class="prevNot">左</a><a href="javascript:;" class="next">右</a></span>
  </div>
  <ul class="items" style="display:block;">
  <li><a href="#">北京四中网校</a></li>
  <li><a href="#">学大教育</a></li>
  <li><a href="#">中国统一教育网</a></li>
  <li><a href="#">101远程教育网</a></li>
  <li><a href="#">巨人教育</a></li>
  <li><a href="#">黄冈中学网校</a></li>
  </ul>
  <ul class="items">
  <li><a href="#">新东方</a></li>
  <li><a href="#">英孚教育</a></li>
  <li><a href="#">环球雅思</a></li>
  <li><a href="#">韦博国际英语</a></li>
  <li><a href="#">华尔街英语</a></li>
  <li><a href="#">新航道</a></li>
  </ul>
  <div class="btn"><a href="#">完整榜单</a></div>
 </div>
  </div>
 <!--/list-->
</div>
</body>
</html>

Salin selepas log masuk

希望本文所述对大家的javascript程序设计有所帮助。