在引導旋轉木馬

我試圖顯示多個DIV一個按鈕被按下時，點擊後顯示多格。例如，我想僅在點擊Button1時才顯示id = div1的所有div。同樣，只有當Button2被點擊時才顯示id = div2的所有div。越來越多的其他幻燈片也一樣。

HTML：

<div class="container"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
     <div class="divA"> 
      <div class="divAA"> 
      <div id="div1" class="targetDiv"> 
       <p>Div1 Intro: Hidden until Button1 is clicked</p> 
      </div> 
      </div> 
      <p> 
      Div1 Short to be shown by default. 
      <span id="div1" class="targetDiv">Hidden span until Button1 is clicked</span> 
      </p> 
      <a class="showSingle" target="1">Button1</a> 
      <div class="divAAA"> 
      <div id="div1" class="targetDiv"> 
       <p> 
       Div1 Details: Hidden until Button1 is clicked. 
       </p> 
      </div> 
      </div> 
     </div> 
     </div> 

     <div class="item"> 
     <div class="divB"> 
      <div class="divBB"> 
      <div id="div2" class="targetDiv"> 
       <p>Div2 Intro: Hidden until Button1 is clicked 
       <span id="div2" class="targetDiv">Hidden span until Button1 is clicked</span> 
       </p> 
      </div> 
      </div> 
      <p> 
      Div2 Short 
      </p> 
      <a class="showSingle" target="2">Button2</a> 
      <div id="div2" class="targetDiv"> 
      <p> 
       Div2 Details: Hidden until Button2 is clicked. Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked. YOLO. 
      </p></div> 
     </div> 
     </div> 

     <div class="item"> 
     3 
     </div> 

     <div class="item"> 
     4 
     </div> 
    </div> 

    <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div> 
</div>

的Javascript：

jQuery(function(){ 
     jQuery('.showSingle').click(function(){ 
       jQuery('.targetDiv').hide(); 
       jQuery('#div'+jQuery(this).attr('target')).show(); 
     }); 
});

來源

2016-06-20 Elaine Byene

這是工作！什麼是問題？ –

不，它工作不正常。目前只有1個div顯示，而不是3個div當點擊相應的按鈕。此外，3格將保持隱藏，直到點擊按鈕。 –

_I要顯示所有使用id = DIV1的div被點擊Button1的，只有當_... ID必須是唯一的，使用類，而不是 –

不能使用相同的id多個元素。您需要將ID更改爲課程。

可以使用CSS最初隱藏起來 - display:none，然後按鈕單擊它可以使用類選擇，而不是id選擇來顯示。

這裏是改變的代碼。

如果你喜歡小提琴：https://jsfiddle.net/ga6gmy8m/2/

jQuery(function(){ 
 
     jQuery('.showSingle').click(function(){ 
 
       jQuery('.targetDiv').hide(); 
 
      jQuery(this).hide(); jQuery('.div'+jQuery(this).attr('target')).show(); 
 
     }); 
 
});

.carousel { 
 
    height: 200px; 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
} 
 
.item { 
 
    text-align: center; 
 
} 
 
.div2,.div1{ 
 
    display:none; 
 
} 
 
.showSingle { 
 
    border: 1px solid #000; 
 
    padding: 5px 10px; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <div class="divA"> 
 
      <div class="divAA"> 
 
      <div class="div1" class="targetDiv"> 
 
       <p>Div1 Intro: Hidden until Button1 is clicked</p> 
 
      </div> 
 
      </div> 
 
      <p> 
 
      Div1 Short to be shown by default. 
 
      <span class="div1" class="targetDiv">Hidden span until Button1 is clicked</span> 
 
      </p> 
 
      <a class="showSingle" target="1">Button1</a> 
 
      <div class="divAAA"> 
 
      <div class="div1" class="targetDiv"> 
 
       <p> 
 
       Div1 Details: Hidden until Button1 is clicked. 
 
       </p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="item"> 
 
     <div class="divB"> 
 
      <div class="divBB"> 
 
      <div class="div2" class="targetDiv"> 
 
       <p>Div2 Intro: Hidden until Button1 is clicked 
 
       <span class="div2" class="targetDiv">Hidden span until Button1 is clicked</span> 
 
       </p> 
 
      </div> 
 
      </div> 
 
      <p> 
 
      Div2 Short 
 
      </p> 
 
      <a class="showSingle" target="2">Button2</a> 
 
      <div class="div2" class="targetDiv" style="display:none"> 
 
      <p> 
 
       Div2 Details: Hidden until Button2 is clicked. Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked. YOLO. 
 
      </p></div> 
 
     </div> 
 
     </div> 
 
    
 
     <div class="item"> 
 
     3 
 
     </div> 
 

 
     <div class="item"> 
 
     4 
 
     </div> 
 
    </div> 
 

 
    <!-- Left and right controls --> 
 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    </div> 
 
</div>

來源

2016-06-20 12:25:43

太棒了！ btw，我們可以在點擊時隱藏「buttonX」嗎？它似乎沒有任何目的，一旦它出現:) –

是的，我已經更新了代碼。你可以使用'jQuery（this）.hide（）;'。 'this'通常指代執行操作的元素。 –

謝謝。得到它的工作:) –

指定一個類你想點擊一個div時顯示的元素（div的）。創建一個可以分配給這些div的類。請記住，不要將相同的ID分配給元素，因爲這可能是個問題。

來源

2016-06-20 12:19:35

你可以編輯當前的JSFiddle並顯示我嗎？ –

請檢查https://jsfiddle.net/ga6gmy8m/3/ –

太感謝你了：）我得到它的工作使用其他的解決辦法。 –

在引導旋轉木馬

回答

相關問題