Question

我知道如何切换div，即隐藏/显示元素。但是如何在两个div之间切换？

<button>Change</button>
<div class="english">
  <h4><strong>English headline</strong></h4>
  <p>Eng Content</p>
</div>
<div class="hindi">
  <h4><strong>Hindi headline</strong></h4>
  <p>Hindi Content</p>
</div>

Answer 1

您可以在jquery中使用toggle()函数。隐藏任何一个div并显示其他一个div，然后在按钮单击上调用toggle()

$(function(){
  $('div.hindi').hide();// hide it initially
  $('button').on('click', function(){
     $('div.english, div.hindi').toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change</button>
<div class="english">
  <h4><strong>English headline</strong></h4>
  <p>Eng Content</p>
</div>
<div class="hindi">
  <h4><strong>Hindi headline</strong></h4>
  <p>Hindi Content</p>
</div>

Answer 2

最初将display: none设置为第二个div。然后，按以下方式在按钮上同时在两个div上使用toggle()：

$('button').click(function(){
  $('.english, .hindi').toggle();
});

.hindi {display: none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change</button>
<div class="english active">
  <h4><strong>English headline</strong></h4>
  <p>Eng Content</p>
</div>
<div class="hindi">
  <h4><strong>Hindi headline</strong></h4>
  <p>Hindi Content</p>
</div>

Answer 3

只需使用通用类进行隐藏和切换即可！

$('button').click(function(){
  $('.common').toggleClass("hide-dom");
});

.hide-dom {display: none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change</button>
<div class="common">
  <h4><strong>English headline</strong></h4>
  <p>English Content</p>
</div>
<div class="common hide-dom">
  <h4><strong>Hindi headline</strong></h4>
  <p>Hindi Content</p>
</div>

Answer 4

如果只有两个div，则这是您可以执行的一种方法。

$('.hindi').hide();
$('button').on('click', function(){
  $('.english, .hindi').toggle();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change</button>
<div class="english">
  <h4><strong>English headline</strong></h4>
  <p>Eng Content</p>
</div>
<div class="hindi">
  <h4><strong>Hindi headline</strong></h4>
  <p>Hindi Content</p>
</div>

Answer 5

function toggleDiv() {
  var englishDiv = $('#english');
  var hindiDiv = $('#hindi');
    englishDiv.toggle();
    hindiDiv.toggle();
}

.english {
  display: block;
}

.hindi {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="toggleDiv()">Change</button>
<div class="english" id="english">
  <h4><strong>English headline</strong></h4>
  <p>Eng Content</p>
</div>
<div class="hindi" id="hindi">
  <h4><strong>Hindi headline</strong></h4>
  <p>Hindi Content</p>
</div>

Answer 6

有趣的是，这里只有HTML / CSS选项

/*Hide Hindi initially*/

.hindi {
  display: none;
}


/*Hide the checkbox*/

#cbChange {
  margin-left: -99999px;
}


/*Use the :checked condition and general sibling selector (~)
  To Hide and show;
*/

#cbChange:checked~.hindi {
  display: block;
}

#cbChange:checked~.english {
  display: none;
}


/*Make the label button sexy*/

.lblChange {
  border-radius: 20px;
  color: #FFFFFF;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 100;
  padding: 10px;
  background-color: #3D94F6;
  box-shadow: 1px 1px 20px 0px #000000;
  text-shadow: 1px 1px 20px #000000;
  border: solid #337FED 1px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.lblChange:hover {
  background: #1E62D0;
  background-image: linear-gradient(to bottom, #1E62D0, #3D94F6);
  text-decoration: none;
}

<label for="cbChange" class="lblChange">Change</label><input id="cbChange" type="checkbox" />
<div class="english">
  <h4><strong>English headline</strong></h4>
  <p>Eng Content</p>
</div>
<div class="hindi">
  <h4><strong>Hindi headline</strong></h4>
  <p>Hindi Content</p>
</div>

如何使用按钮在两个div元素之间切换

6 个答案: