2017-04-11 506 views
2

我试图创建一个按钮列表,当点击一个按钮时,它会显示该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

+0

您可以随时检查devtools错误。 '未捕获的错误:语法错误,无法识别的表达式:不支持的伪:点击'。改变它为一个有效的伪类,如':focus',它会工作。 – Ricky

回答

2

而不是在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

1

更改代码

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

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

就是这样!非常感谢:http://codepen.io/simplecreatif/pen/gWYaPR – phillynight

+0

实际上,这似乎适用于Chrome,但不适用于Safari ...即使是您推荐的更改的Codepen在Safari中也不会执行任何操作? – phillynight

1

试试这个

$(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>

相关问题