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

Question

我正在尝试创建一个按钮列表，当单击一个按钮时，它会显示DIV并隐藏其余部分。在单击任何按钮之前还会显示一条默认消息。

我已经创建了一个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。

Answer 1

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

Answer 2

更改您的代码

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

到

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

Answer 3

尝试

＆＃13;

＆＃13;

$(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');
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;