为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

守着一只汪 2022-09-23 16:36:03

我想仅在单击特定按钮时才显示特定的 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>


查看完整描述

3 回答

?
繁华开满天机

TA贡献1489条经验 获得超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贡献1472条经验 获得超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贡献1478条经验 获得超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 关注
  • 11 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信