单击按钮时如何显示 div 内容并隐藏其他内容 - JavaScript

Question

我想仅在单击特定按钮时才显示特定的 div。就像如果单击带有id#newLD的按钮一样，则应显示id为#createLD的唯一div，而其他div应保持隐藏状态。我创建的所有三个按钮都需要相同的功能。

附言 - 我检查了堆栈溢出的其他解决方案，但代码不适合我。它们使它看起来太复杂了。请帮助并建议初学者可以理解的最简单的方法。

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>

Answer 1

您可以尝试将相应的元素与“属性以选择器开头”[name^=“value”]和“属性以选择器结尾”[name$=“value”]$('.myButton').click(function(){&nbsp; $('div[id^=create]').hide(); //hide all&nbsp; var id = $(this).attr('id'); //get the id of the clicked button&nbsp; var end = id.slice(-2);&nbsp; &nbsp; &nbsp; //get last 2 character (LD/VC/FD) from id&nbsp; $(`div[id$=${end}]`).show(); //match the div with id ends with the character and show});button {&nbsp; padding: 20px;&nbsp; margin: 0 5px 0 0;&nbsp; border: 0 solid;&nbsp; text-transform: uppercase;&nbsp; letter-spacing: 1.5px;&nbsp; color: #999999;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="button-container">&nbsp; <button id="newLD" class="myButton">Logo</button>&nbsp; <button id="newVC" class="myButton">Visiting Card</button>&nbsp; <button id="newFD" class="myButton">Flyer Design</button></div><div id="createLD" style="display: none">&nbsp; <p>Here is the lofo design div</p></div><div id="createVC" style="display: none">&nbsp; <p>Here is the visitng card design div</p></div><div id="createFD" style="display: none">&nbsp; <p>Here is the flyer design design div</p></div>

Answer 2

$(".myButton").on("click", function() {&nbsp; let id = $(this).attr("id");if(id=='newLD'){&nbsp; $('createLD').show()$('createVC').hide()$('createFD').hide()}else if(id=='newVC'){&nbsp; $('createVC').show()$('createLD').hide()$('createFD').hide()}else if(id=='newFD'){&nbsp; $('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">&nbsp; <button id="newLD" class="myButton">Logo</button>&nbsp; <button id="newVC" class="myButton">Visiting Card</button>&nbsp; <button id="newFD" class="myButton">Flyer Design</button></div><div id="createLD" style="display: none">&nbsp; <p>Here is the lofo design div</p></div><div id="createVC" style="display: none">&nbsp; <p>Here is the visitng card design div</p></div><div id="createFD" style="display: none">&nbsp; <p>Here is the flyer design design div</p></div>

Answer 3

您可以这样操作：获取单击的按钮的 id，隐藏 ID 以“create”开头的所有 div，并仅显示具有相应 id 的 div。$(".myButton").on("click", function() {&nbsp; let id = $(this).attr("id");&nbsp; id = id.substr(3);&nbsp; $("div[id^='create']").hide();&nbsp; $("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">&nbsp; <button id="newLD" class="myButton">Logo</button>&nbsp; <button id="newVC" class="myButton">Visiting Card</button>&nbsp; <button id="newFD" class="myButton">Flyer Design</button></div><div id="createLD" style="display: none">&nbsp; <p>Here is the lofo design div</p></div><div id="createVC" style="display: none">&nbsp; <p>Here is the visitng card design div</p></div><div id="createFD" style="display: none">&nbsp; <p>Here is the flyer design design div</p></div>