javascript - 使用 2 个按钮在 2 个 div 之间切换

Question

我正在尝试使用 2 个按钮在 2 个 div 之间切换。我已经遍历谷歌，但仍然一无所获。你能告诉我哪里错了吗，我确定它在 jQuery.也可以使用 normal 而不是吗？

这是我的代码:

// only show one panel at a time
jQuery(".flip").on("click", function(e) {
  var target = jQuery(this).attr("href");
  jQuery(target).slideToggle("fast");
  jQuery(".content").not(target).hide();
  e.preventDefault();
});

.button-wrapper {
  text-align: center;
}

.button-wrapper a {
  text-decoration: none;
  color: black;
  margin: 10px
}

.content h1 {
  text-align: center;
  margin-top: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="button-wrapper">
    <a class="flip top-button" href="#first-div" target="" data-toggle="">Div1</a>
    <a class="flip top-button" href="#second-div" target="" data-toggle="">Div2</a>
  </div>

  <div class="content" id="cont1">
    <h1>Im the first DIV</h1>
  </div>
  <div class="content" id="cont2">
    <h1>Im the second DIV</h1>
  </div>

这里还有一个代码笔:

https://codepen.io/Sarithan/pen/Wywmrx

Answer 1

您的代码没问题。您需要将div 的Id 更改为flip 的href。您的代码不起作用，因为您在 .flip 元素的 href 中有不同的 id 然后在 .content 元素。

// only show one panel at a time
jQuery(".flip").on("click", function(e) {        
    var target = jQuery(this).attr("href");
    jQuery(target).slideToggle("fast");
    jQuery(".content").not(target).hide();
    e.preventDefault();
});

.button-wrapper{
  text-align: center;
}

.button-wrapper a{
  text-decoration: none;
  color: black;
  margin: 10px
}

.content h1{
  text-align: center;
  margin-top: 2em;
}

.top-button{
    background-color: #ffffff;
    border: 1px solid black;
    text-align: center;
    width: 50px;
    height: 5rem;
    margin: 3px;
    -webkit-border-radius: 12;
    -moz-border-radius: 12;
    border-radius: 4px;
} 

.top-button a{
    text-decoration: none;
    color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="button-wrapper">
   <a class="flip top-button" href="#first-div" target="" data-toggle="">Div1</a>
   <a class="flip top-button" href="#second-div" target="" data-toggle="">Div2</a>
   </div>

  <div class="content" id="first-div">
       <h1>Im the first DIV</h1>
  </div>
   <div class="content" id="second-div" style="display:none">
       <h1>Im the second DIV</h1>
  </div>