点击按钮，显示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。

您可以随时检查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

答

更改代码

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

到

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

就是这样！非常感谢：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>

点击按钮，显示div内容，隐藏其他 - JS

相关推荐