第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

單擊按鈕時如何顯示 div 內容并隱藏其他內容 - JavaScript

單擊按鈕時如何顯示 div 內容并隱藏其他內容 - JavaScript

守著一只汪 2022-09-23 16:36:03
我想僅在單擊特定按鈕時才顯示特定的 div。就像如果單擊帶有id#newLD的按鈕一樣，則應顯示id為#createLD的唯一div，而其他div應保持隱藏狀態(tài)。我創(chuàng)建的所有三個按鈕都需要相同的功能。附言 - 我檢查了堆棧溢出的其他解決方案，但代碼不適合我。它們使它看起來太復雜了。請幫助并建議初學者可以理解的最簡單的方法。button {    padding: 20px;    margin: 0 5px 0 0;    border: 0 solid;    text-transform: uppercase;    letter-spacing: 1.5px;    color: #999999;}<div id="button-container">    <button id="newLD" class="myButton">Logo</button>    <button id="newVC" class="myButton">Visiting Card</button>    <button id="newFD" class="myButton">Flyer Design</button></div>    <div id="createLD" style="display: none">        <p>Here is the lofo design div</p>    </div>    <div id="createVC" style="display: none">        <p>Here is the visitng card design div</p>    </div>    <div id="createFD" style="display: none">        <p>Here is the flyer design design div</p>    </div>
查看完整描述

3 回答

?
繁華開滿天機

TA貢獻1816條經(jīng)驗 獲得超4個贊

您可以嘗試將相應的元素與“屬性以選擇器開頭”[name^=“value”]和“屬性以選擇器結尾”[name$=“value”]


$('.myButton').click(function(){

  $('div[id^=create]').hide(); //hide all

  var id = $(this).attr('id'); //get the id of the clicked button

  var end = id.slice(-2);      //get last 2 character (LD/VC/FD) from id

  $(`div[id$=${end}]`).show(); //match the div with id ends with the character and show

});

button {

  padding: 20px;

  margin: 0 5px 0 0;

  border: 0 solid;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  color: #999999;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="button-container">

  <button id="newLD" class="myButton">Logo</button>

  <button id="newVC" class="myButton">Visiting Card</button>

  <button id="newFD" class="myButton">Flyer Design</button>

</div>



<div id="createLD" style="display: none">

  <p>Here is the lofo design div</p>

</div>


<div id="createVC" style="display: none">

  <p>Here is the visitng card design div</p>

</div>


<div id="createFD" style="display: none">

  <p>Here is the flyer design design div</p>

</div>


查看完整回答
反對 回復 2022-09-23
?
狐的傳說

TA貢獻1804條經(jīng)驗 獲得超3個贊

$(".myButton").on("click", function() {

  let id = $(this).attr("id");


if(id=='newLD'){

  $('createLD').show()

$('createVC').hide()

$('createFD').hide()

}

else if(id=='newVC'){

  $('createVC').show()

$('createLD').hide()

$('createFD').hide()

}

else if(id=='newFD'){

  $('createFD').show()

$('createVC').hide()

$('createLD').hide()

}

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="button-container">

  <button id="newLD" class="myButton">Logo</button>

  <button id="newVC" class="myButton">Visiting Card</button>

  <button id="newFD" class="myButton">Flyer Design</button>

</div>



<div id="createLD" style="display: none">

  <p>Here is the lofo design div</p>

</div>


<div id="createVC" style="display: none">

  <p>Here is the visitng card design div</p>

</div>


<div id="createFD" style="display: none">

  <p>Here is the flyer design design div</p>

</div>


查看完整回答
反對 回復 2022-09-23
?
達令說

TA貢獻1821條經(jīng)驗 獲得超6個贊

您可以這樣操作：獲取單擊的按鈕的 id，隱藏 ID 以“create”開頭的所有 div，并僅顯示具有相應 id 的 div。


$(".myButton").on("click", function() {

  let id = $(this).attr("id");

  id = id.substr(3);

  $("div[id^='create']").hide();

  $("div[id='create" + id + "']").show();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="button-container">

  <button id="newLD" class="myButton">Logo</button>

  <button id="newVC" class="myButton">Visiting Card</button>

  <button id="newFD" class="myButton">Flyer Design</button>

</div>



<div id="createLD" style="display: none">

  <p>Here is the lofo design div</p>

</div>


<div id="createVC" style="display: none">

  <p>Here is the visitng card design div</p>

</div>


<div id="createFD" style="display: none">

  <p>Here is the flyer design design div</p>

</div>


查看完整回答
反對 回復 2022-09-23
  • 3 回答
  • 0 關注
  • 160 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號