單擊atag時顯示特定div。並隱藏其他div

Question

我對jquery和編碼一般都不熟悉。我遇到了一些麻煩。

我想要的是當頁面加載時，'Vlogging'鏈接處於活動狀態，並顯示'Details 1'。然後，當你點擊'電影製作'或'貝美'...'時，會顯示詳細信息2或3，以及有哪些人在那裏消失。

到目前爲止，我已經設置好了所有東西，只需要點擊其他鏈接中的其中一個正確的「詳細信息」文本就可以顯示出來。

非常感謝你，我現在有一把小提琴！

http://jsfiddle.net/t1huc43d/

下面是代碼比需要調整：

$(function() { 
    $("togglediv1").click(function() { 
     $("#togglediv1").removeClass("display-start"); 
     $("li").removeClass("display"); 
     $(this).addClass("display"); 
    }); 
}); 

Answer 1

此代碼將爲您節省大量的時間。我添加了一個名爲「數據」的自定義屬性。該屬性用於將鏈接與您希望顯示的選項卡綁定。此代碼將使添加更多標籤等變得更加容易。查看更改後的HTML和JavaScript的底部。

<div id="wrap"> 

<ul id="divtoggle"> 
    <li><a class="link" data="1">Vlogging</a></li> 
    <li><a class="link" data="2"> Filmmaking</a></li> 
    <li><a class="link" data="3"> Beme</a></li> 
</ul> 


<div class="text"> 
    <div class="tab" data="1">Details 1</div> 
    <div class="tab" data="2">Details 2</div> 
    <div class="tab" data="3">Details 3</div> 
</div> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 
$(function() { 
    $(".link").click(function() { 
    $(".active").removeClass("active"); 
    $(this).addClass("active"); 
    dataAttr = $(this).attr("data"); 
    $(".tab").hide(); 
    $(".tab[data="+dataAttr+"]").show(); 
    }); 
    $(".link:first").click(); 
}); 
</script> 

Answer 2

$(function() { 
    $("#togglediv1").click(function() { 
     $("#one").removeClass("display"); 
     $("#one").addClass("display-start"); 
     $("#two").removeClass("display-start"); 
     $("#two").addClass("display"); 
     $("#three").removeClass("display-start"); 
     $("#three").addClass("display"); 
    }); 
}); 

$(function() { 
    $("#togglediv2").click(function() { 
     $("#one").removeClass("display-start"); 
     $("#one").addClass("display"); 
     $("#two").removeClass("display"); 
     $("#two").addClass("display-start"); 
     $("#three").addClass("display"); 
     $("#three").removeClass("display-start"); 
    }); 
}); 

...

Answer 3

更新的jsfiddle：http://jsfiddle.net/t1huc43d/3/

由於您的ID是不是在跟蹤點擊什麼有利的，哪些不是，我決定只使用this找到你點擊的細節。

你更新的javascript：

$(function() { 
    $("li").click(function() { 
     $("#togglediv1").removeClass("active-start"); 
     $("li").removeClass("active"); 
     $(this).addClass("active"); 
     let temp = $("#divtoggle").children(); 
      var index; 

     for (let i = 0; i < temp.length; i++) 
     { 
     if (this == temp[i]) 
     { 
      index = i; 
      break; 
     } 
     } 

     $(".display-start").addClass("display"); 
     $(".display-start").removeClass("display-start"); 

      let text_children = $(".text").children() 
     let the_child = text_children[index]; 
      $(text_children[index]).addClass("display-start"); 
     $(text_children[index]).removeClass("display"); 
    }); 
}); 

Answer 4

JQuery的實際上有一些組件來幫助你，但對我來說，這樣做的最短和最徹底的方法是：

我的第一件事情d請設置每個標題的id，由1遞增來之後，我會做同樣的，像這樣的細節：

<div id="wrap"> 
    <ul id="divtoggle"> 
     <li><a class="title" id="title-1">Vlogging</a></li> 
     <li><a class="title" id="title-2"> Filmmaking</a></li> 
     <li><a class="title" id="title-3"> Beme</a></li> 
    </ul> 

    <div class="text"> 
     <div class='display' id="detail-1">Details 1</div> 
     <div class='display' id="detail-2">Details 2</div> 
     <div class='display' id="detail-3">Details 3</div> 
    </div> 
</div> 

之後，JQue ry非常簡單。在類title上設置點擊事件。首先要做的是解析點擊標題的id。一旦你的，針對相關細節，並顯示：

$(document).ready(function() { 

    $(".title").click(function() { 

    //*** get id 
    var id = $(this).attr("id").split("-")[1]; 
    if (typeof id != "undefined"){ 

     //*** hide other descriptions and show yours 
     $(".display").hide(); 
     $("#detail-" + id).show(); 
    } 

    }); 

}); 

DEMO：http://jsbin.com/volikofihe/edit?html,js,console,output

Answer 5

在這裏你去。稍微簡化你的CSS。切換頂部鏈接上的.active類，以及文本div上的.display類。當你點擊鏈接時，代碼使用列表中鏈接的$.index()作爲要顯示的文本div的索引。所以如果你點擊第二個鏈接，它會顯示第二個文本框。

$(function() { 
 
    $toggleLinks = $('#divtoggle a'), 
 
    $displays = $('.text div'); 
 
    
 
    $toggleLinks.on('click', function(e) { 
 
    e.preventDefault(); 
 
    $toggleLinks.removeClass('active'); 
 
    $(this).addClass('active'); 
 
    $displays.removeClass('display'); 
 
    $displays.eq($(this).closest('li').index()).addClass('display'); 
 
    }); 
 
});

li { 
 
    color: grey; 
 
    font: effra; 
 
    font-weight: bold; 
 
} 
 

 
a:hover { 
 
    color: #aaaaaa; 
 
    cursor: pointer; 
 
} 
 

 
.active { 
 
    color: orange; 
 
} 
 

 
.text div { 
 
    display: none; 
 
} 
 

 
.text .display { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrap"> 
 

 
    <ul id="divtoggle"> 
 
    <li><a class="active">Vlogging</a></li> 
 
    <li><a>Filmmaking</a></li> 
 
    <li><a>Beme</a></li> 
 
    </ul> 
 

 
    <div class="text"> 
 
    <div class='display'>Details 1</div> 
 
    <div>Details 2</div> 
 
    <div>Details 3</div> 
 
    </div> 
 

 
</div>

Answer 6

醃製儘可能多的現有代碼儘可能的。 Updated fiddle.

我添加一個數據控件自定義屬性到每個li元素，以便其關聯到對應的各數據的div：

<li data-controls="one"><a id="togglediv1" class="active-start">Vlogging</a></li> 
<li data-controls="two"><a id="togglediv2"> Filmmaking</a></li> 
<li data-controls="three"><a id="togglediv3"> Beme</a></li> 

然後我更新了JavaScript來刪除和添加類， 如所須。