代码之家 › 专栏 › 技术社区 › topper1309

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

javascript jquery

topper1309 · 技术社区 · 6 年前

我知道如何切换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>

6 回复 | 直到 6 年前

Bhushan Kawadkar 6 年前

你可以利用 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>

Mamun 6 年前

初凝 display: none toggle() 按以下方式单击按钮时,在两个div上:

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

Praveen 6 年前

只需使用公共类隐藏和切换它!

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

MW_dev 6 年前

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

Kiran Shahi Jonny 6 年前

如果你只有两个 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>

Gaurav joshi 6 年前

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>