Question

我有三个按钮 ADD ， SPILLAGE 和 SPOILAGE 。

当我按添加按钮时如何仅显示添加容器，如果按溢出，则隐藏添加容器 按钮？

这是我的代码段

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#add">Add</button>&nbsp;
<button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#spoiled">Spoiled</button>&nbsp;
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#spilled">Spilled</button>

<div id="add" class="collapse"><br/>
<select name="IngID" id="IngID" class="form-control select2" data-placeholder="Select Ingredients"><option value="" disabled selected hidden></option>
</div>

<div id="spoiled" class="collapse"><br/>
<select name="IngID" id="IngID" class="form-control select2" data-placeholder="Select Ingredients"><option value="" disabled selected hidden></option>
</div>

<div id="spilled" class="collapse"><br/>
<select name="IngID" id="IngID" class="form-control select2" data-placeholder="Select Ingredients"><option value="" disabled selected hidden></option>
</div>

＆＃13;

Answer 1

使用data-target显示所需的div

＆＃13;

$('.collapse').hide();
$(".btn").click(function() {

  $('.collapse').hide();
  var $thisdata = $(this).attr('data-target');

  console.log($thisdata)
  $($thisdata).show()



})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#add">Add</button>&nbsp;
<button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#spoiled">Spoiled</button>&nbsp;
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#spilled">Spilled</button>

<div id="add" class="collapse"><br/> add
  <select name="IngID" id="IngID" class="form-control select2" data-placeholder="Select Ingredients"><option value="" disabled selected hidden></option>
  </select>
</div>

<div id="spoiled" class="collapse"><br/> spoiled
  <select name="IngID" id="IngID" class="form-control select2" data-placeholder="Select Ingredients"><option value="" disabled selected hidden></option>
</select>
</div>

<div id="spilled" class="collapse"><br/> spilled
  <select name="IngID" id="IngID" class="form-control select2" data-placeholder="Select Ingredients"><option value="" disabled selected hidden></option>
</select>
</div>

＆＃13;

Answer 2

使用此代码：

<!DOCTYPE html>
<html>
<head>
<style>
.main_div{text-align:center; background: #00C492; padding:20px; width: 400px;}
.inner_div{background: #fff; margin-top:20px; height: 100px;}
.buttons a{font-size: 16px;}
.buttons a:hover{cursor:pointer; font-size: 16px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
    $('#showdiv1').click(function() {
        $('div[id^=div]').hide();
        $('#div1').show();
    });
    $('#showdiv2').click(function() {
        $('div[id^=div]').hide();
        $('#div2').show();
    });
    $('#showdiv3').click(function() {
        $('div[id^=div]').hide();
        $('#div3').show();
    });
    $('#showdiv4').click(function() {
        $('div[id^=div]').hide();
        $('#div4').show();
    });
})
</script>
</head>
<body>
<div class="main_div">
<div class="buttons">
<a class="button" id="showdiv1">Menu 1</a> | <a class="button" id="showdiv2">Menu 2</a> | <a class="button" id="showdiv3">Menu 3</a> | <a class="button" id="showdiv4">Menu 4</a>
</div>
<div class="inner_div">
<div id="div1" style="display:none;">Hello, I'm Container one</div>
<div id="div2" style="display:none;">Hello, I'm Container two</div>
<div id="div3" style="display:none;">Hello, I'm Container three</div>
<div id="div4" style="display:none;">Hello, I'm Container four</div>
</div>
</div>

</body>
</html>

删除在线jquery链接并添加本地文件路径。

如何使用jquery显示带引导按钮的特定div

2 个答案: