溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JS如何實現(xiàn)標簽頁切換效果

發(fā)布時間：2021-06-21 11:34:17 來源：億速云 閱讀：427 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)JS如何實現(xiàn)標簽頁切換效果的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

具體內(nèi)容如下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>resize</title>
<style type="text/css">
*{margin:0;padding:0;}
 #wrap{width:500px; margin:10px auto; }
 #tag{ width:498px; overflow:hidden; background:#000; border:1px solid #000; }
 #tag li{list-style:none; float:left; margin-right:0px; color:white; padding:5px 20px; cursor: pointer;}
 #tag .current{ color:#000; background:#ccc; }
 #tagContent div{ width:498px; border:1px solid #000; border-top:none; height:300px; display:none; }
</style>
</head>
<body>
<div id="warp">
 <ul id="tag">
  <li>標簽一</li>
  <li>標簽二</li>
  <li>標簽三</li>
  <li>標簽4</li>
  <li>標簽5</li>
 </ul>
 <div id="tagContent">
  <div class="J_tabClass"> 內(nèi)容一<br>內(nèi)容一 </div>
  <div class="J_tabClass"> 內(nèi)容二<br>內(nèi)容二 </div>
  <div class="J_tabClass"> 內(nèi)容三<br>內(nèi)容三 </div>
  <div class="J_tabClass"> 內(nèi)容4<br>內(nèi)容4 </div>
  <div class="J_tabClass"> 內(nèi)容4<br>內(nèi)容5555555555555555 </div>
 </div>
</div>
<script type="text/javascript">
//nameSpace
var VVG = {};
VVG.DOM = {};
//創(chuàng)建getElementsByClassName方法
VVG.DOM.getElementsByClassName = function(str,parent,tag){
 //父節(jié)點存在
if(parent){
 // 當父節(jié)點為string類型時，查找DOM節(jié)點，否則直接引用parent
  parent = typeof parent == "string" ? document.getElementById(parent):parent;
  // parent為空時提示錯誤信息
if(!parent) alert("找不到標簽，請檢查參數(shù)是否正確");
 }else{
  // 未傳值時，父節(jié)點為body
  parent = document.body;
 }
 // tagContent為節(jié)點類型，未傳值時為all節(jié)點
 tag = tag || "*";
 // 在父節(jié)點查找子節(jié)點，建立空數(shù)組arr
var els = parent.getElementsByTagName(tag),arr=[];
 for(var i=0,n=els.length;i<n;i++){
  // 查找每個節(jié)點下的classname，以空格分離為一個k數(shù)組
for(var j=0,k=els[i].className.split(" "),l=k.length;j<1;j++){
   // 當K數(shù)組中有一個值與str值相等時，記住這個標簽并推入arr數(shù)組
if(k[j]==str){
   arr.push(els[i]);
   break;
   }
  }
 }
 // 返回數(shù)組
return arr;
}
//創(chuàng)建TabManager對象
VVG.TabManager = function(oo){
   this.root = oo.root || "warp"; 
   this.tabUlId = oo.tabUlId||"tabUlId";
   this.tabConId = oo.tabConId||"tabConId";
   this.tabConClass = oo.tabConClass||"J_tabClass";
   this.trggle = oo.trggle || "click";
   this.currentCss = oo.currentCss || "current";
  }
VVG.TabManager.prototype = {
  tabChange:function(){
   // 獲取UL的id
var ulid = document.getElementById(this.tabUlId);
   // 獲取UL下的LI元素
var ulli = ulid.getElementsByTagName("li");
   // 獲取內(nèi)容盒子DIV元素
var tabConId = document.getElementById(this.tabConId);
   // 獲取root下的div的class為特定值的對象數(shù)組
var tabConClasses = VVG.DOM.getElementsByClassName(this.tabConClass,this.root,"div");
   // 初始化
   ulli[0].className = this.currentCss;
   tabConClasses[0].style.display = 'block';
   for (var i = ulli.length - 1; i >= 0; i--) {
   // 賦值this 與 that,避免this混亂
var that = this;
   // 設(shè)置對象index屬性
   ulli[i].index = i;
   // 設(shè)置對象的事件
   ulli[i]["on" + this.trggle] = function(){
    for(var j = tabConClasses.length - 1; j >= 0; j--){
     tabConClasses[j].style.display = "none";
     ulli[j].className = "";
    }
    tabConClasses[this.index].style.display = "block";
    this.className = that.currentCss;
   }
   }
  }
 }
// 新建對象實例
var TabManager1 = new VVG.TabManager(
 {
 root:"warp",//包裹tab對象的div層的ID名稱，必填
 tabUlId:"tag",//TAB標簽LI元素的父親UL元素的ID名稱，必填
 tabConId:"tagContent",//內(nèi)容元素的包裹盒子的ID名稱，必填 
 trggle:"mouseover",//切換方式，默認為click，可選
 currentCss:"current",//TAB標簽liy元素的當前CSS名稱，默認為current
 tabConClass:"J_tabClass",//內(nèi)容元素的CLASS名稱，默認為J_tabClass
 }
);
// 調(diào)用對象方法
TabManager1.tabChange();

</script>
</body>
</html>

感謝各位的閱讀！關(guān)于“JS如何實現(xiàn)標簽頁切換效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手