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

Question

我试图用2个按钮在2个div之间切换。我已经遍布谷歌，但仍然没有。你能否告诉我哪里错了，我确定它在jQuery中。也可以使用普通而不是？

这是我的代码：

＆＃13;

＆＃13;

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Title "
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="20dp"
    android:textSize="50sp" />

<Button
    android:id="@+id/button_players1"
    android:layout_width="143dp"
    android:layout_height="30dp"
    android:layout_centerHorizontal="true"
    android:gravity="center"
    android:text="1 Player"
    android:layout_above="@id/button_players2"
    android:textColor="@color/black"
    android:textSize="20sp"/>

<Button
    android:id="@+id/button_players2"
    android:layout_width="145dp"
    android:layout_height="30dp"
    android:layout_centerInParent="true"
    android:gravity="center"
    android:text="2 Players"
    android:textColor="@color/black"
    android:textSize="20sp"
    android:layout_marginTop="15dp"/>


<Button
    android:id="@+id/button_how_to_play"
    android:layout_width="148dp"
    android:layout_height="30dp"
    android:layout_below="@id/button_players2"
    android:layout_centerHorizontal="true"
    android:gravity="center"
    android:text="How to Play"
    android:textColor="@color/black"
    android:textSize="20sp"
    android:layout_marginTop="15dp"/>

<ImageView
    android:id="@+id/footer_logo"
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="20dp" />

</RelativeLayout>

＆＃13;

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

＆＃13;

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

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

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

＆＃13;

＆＃13;

＆＃13;

这也是一个codepen：

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

Answer 1

你的代码很好。您需要将Id的{​​{1}}更改为div的{​​{1}}。您的代码无效，因为href元素flip中的id与href元素中的.flip不同。

＆＃13;

＆＃13;

.content

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

您只需将.content元素的ID替换为href的{​​{1}}的值，但当然不包含.flip

另外，将您的javascript中的#更改为slideToggle，这样您第一次点击它就会继续显示

show

// only show one panel at a time
jQuery(".flip").on("click", function(e) {
  var target = jQuery(this).attr("href");
  jQuery(target).show("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;
}

Answer 3

试试这个。使您的按钮href与内容的id相同。因此，将会有一个链接来确定按钮单击时应显示哪个content。隐藏css上的所有内容类。并在代码中触发click事件。因此，在页面加载时，它将显示内容。您唯一需要做的就是切换视图

＆＃13;

＆＃13;

$(".flip").on("click", function(e) {
    e.preventDefault();
    $(".content").hide();
    $($(this).attr("href")).show("fast");    
});
$("a[href='#first-div']").trigger('click');

＆＃13;

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

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

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

＆＃13;

<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">
       <h1>Im the second DIV</h1>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

正如我在代码中看到的问题不在jQuery中，它是在html中，因为你基于div的id隐藏div但是div id（cont1，cont2）在href标签中给出不同所以它必须是相同。

＆＃13;

＆＃13;

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

$('#first-div').hide();
$('#second-div').hide();

＆＃13;

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

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

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

＆＃13;

<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">
    <h1>Im the second DIV</h1>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

可以使用常规JavaScript！
我不明白为什么每个人都在这里使用jQuery。

这是我的解决方案，我在哪里：

• 添加了class="height0"和一些样式，
• 将a按钮更改为span按钮，因此您不必使用.preventDefault()和其他样式。

＆＃13;

＆＃13;

// Using only JavaScript
var flips = document.querySelectorAll(".flip");
var contents = document.querySelectorAll(".content");
flips.forEach(function(flip) {
  flip.onclick = function() {
    // Hide all
    contents.forEach(function(content) {
      content.classList.add('height0');
    })
    // Show only the one you want
    // (With a timeout, but that's not mandatory!)
    setTimeout(function() {
      var target = flip.getAttribute("target");
      document.querySelector(target).classList.remove('height0');
    }, 500);
  }
});

＆＃13;

.button-wrapper {
  margin: 16px;
  text-align: center;
}

.content h1 {
  text-align: center;
  margin-top: 1em; /* <-- Reduced here, for tiny snippet */
}

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


/* Added the below */

.content {
  max-height: 240px; /* <-- This must be tweaked to fit the maximum content */
  transition: max-height 0.5s ease;
  overflow: hidden;
  background: #eee;
  padding: 0 1em;
}

.height0 {
  max-height: 0;
}

＆＃13;

<div class="wrapper">
  <div class="button-wrapper">
    <span class="flip top-button" target="#first-div">Div1</span>
    <span class="flip top-button" target="#second-div">Div2</span>
  </div>
  <div class="content" id="first-div">
    <h1>I'm the first DIV</h1>
    <p>Some content of DIV 1 here</p>
  </div>
  <div class="content height0" id="second-div">
    <h1>I'm the second DIV</h1>
    <p>Some content of DIV 2 here</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望它有所帮助！