點擊按鈕，顯示div內容，隱藏其他 - JS

我試圖創建一個按鈕列表，當點擊一個按鈕時，它會顯示該DIV並隱藏其餘部分。還有一個默認消息顯示在任何按鈕被點擊之前。點擊按鈕，顯示div內容，隱藏其他 - JS

我已經創建了一個codepen，我認爲我的腳本有問題，但我無法弄清楚我做錯了什麼。任何幫助？

這裏是我想要的腳本：

<script> 
     $(document).on('click', '.div-toggle', function() { 
      var target = $(this).data('target'); 
      var show = $("button:selected", this).data('show'); 
      $(target).children().addClass('hide'); 
      $(show).removeClass('hide'); 
     }); 
     $(document).ready(function(){ 
      $('.div-toggle').trigger('click'); 
     }); 
    </script>

這裏是Codepen。

來源

2017-04-11 phillynight

您可以隨時檢查devtools錯誤。 '未捕獲的錯誤：語法錯誤，無法識別的表達式：不支持的僞：點擊'。改變它爲一個有效的僞類，如'：focus'，它會工作。 – Ricky

而不是在div點擊。

通過點擊按鈕就做：

只是簡單的代碼：

$(document).on('click', '.map-point-sm', function() { 
    var show = $(this).data('show'); 
    $(show).removeClass("hide").siblings().addClass("hide"); 
});

您可以檢查鍋代碼在這裏：

http://codepen.io/sagar_arora/pen/BRBopY

來源

2017-04-11 05:43:31

更改代碼

var show = $("button:selected", this).data('show');

到

var show = $("button:focus", this).data('show');

來源

2017-04-11 05:24:55 Afsar

就是這樣！非常感謝：http://codepen.io/simplecreatif/pen/gWYaPR – phillynight

實際上，這似乎適用於Chrome，但不適用於Safari ...即使是您推薦的更改的Codepen在Safari中也不會執行任何操作？ – phillynight

試試這個

$(document).on('click', '.div-toggle', function() { 
 
    var target = $(this).data('target'); 
 
    var show = $("button:focus", this).data('show'); 
 
    $(target).children().addClass('hide'); 
 
    $(show).removeClass('hide'); 
 
}); 
 
$(document).ready(function(){ 
 
    $('.div-toggle').trigger('click'); 
 
});

.hide { 
 
    display: none; 
 
} 
 
.map-container { 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="map-container"> 
 
    <div class="inner-basic division-map div-toggle" data-target=".division-details" id="divisiondetail"> 
 
    <button class="map-point" data-show=".darwin"> 
 
     <div class="content"> 
 
     <div class="centered-y"> 
 
      <p>Darwin</p> 
 
     </div> 
 
     </div> 
 
    </button> 
 
    <button class="map-point-sm" data-show=".ptown"> 
 
     <div class="content"> 
 
     <div class="centered-y"> 
 
      <p>Ptown</p> 
 
     </div> 
 
     </div> 
 
    </button> 
 
    <button class="map-point-sm" data-show=".philly"> 
 
     <div class="content"> 
 
     <div class="centered-y"> 
 
      <p>Philly</p> 
 
     </div> 
 
     </div> 
 
    </button> 
 
    <button class="map-point-sm" data-show=".dela"> 
 
     <div class="content"> 
 
     <div class="centered-y"> 
 
      <p>Dela</p> 
 
     </div> 
 
     </div> 
 
    </button> 
 
    </div><!-- end inner basic --> 
 
</div> 
 

 

 
<div class="map-container"> 
 
    <div class="inner-basic division-details"> 
 
    <div class="initialmsg"> 
 
     <p>Choose button above</p> 
 
    </div> 
 
    <div class="darwin hide"> 
 
     <p>Darwin Content here</p> 
 
    </div> 
 
    <div class="ptown hide"> 
 
     <p>Ptown Content here</p> 
 
    </div> 
 
    <div class="philly hide"> 
 
     <p>Philly Content here</p> 
 
    </div> 
 
    <div class="dela hide"> 
 
     <p>Dela Content here</p> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-11 05:29:28

點擊按鈕，顯示div內容，隱藏其他 - JS

回答

相關問題