单击锚点时添加div，单击外部或其他锚点时删除div
[英]Adding div when clicking on anchor and removing div when clicking either outside of it or on a different anchor
问题描述
我有两个锚标记，当单击它们时，它们都显示两个不同的div，但是我只想一次显示一个div。 我也想隐藏在其外部单击时显示的div。 我快完成了，但是当我单击第一个锚点然后在第二个锚点上时，两个div都会显示（我一次要一个）。
这是我的代码：
//Display and hide div number 1 $("a.number_1").on("click", function(event) { event.preventDefault(); $(".display_div_1").toggle(); event.stopPropagation(); }); $(".display_div_1").on("click", function(event) { event.preventDefault(); event.stopPropagation(); }); $(".body").on("click", function(event) { event.preventDefault(); $(".display_div_1").hide(); }); //Display and hide div number 2 $("a.number_2").on("click", function(event) { event.preventDefault(); $(".display_div_2").toggle(); event.stopPropagation(); }); $(".display_div_2").on("click", function(event) { event.preventDefault(); event.stopPropagation(); }); $(".body").on("click", function(event) { event.preventDefault(); $(".display_div_2").hide(); });
div.body { background-color: white; width: 100%; height: 400px; border: 1px solid grey; } div.display_div_1 { display: none; } div.display_div_2 { display: none; } ul { margin: 0 0 30px 0; padding: 0px; } li { display: inline-block; } a.display { display: inline-block; background-color: lightblue; padding: 10px 20px; text-decoration: none; } div.display { background-color: grey; width: 100px; height: 100px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="body"> <ul> <li> <a href="" method="POST" class="display number_1">Display div 1</a> </li> <li> <a href="" method="POST" class="display number_2">Display div 2</a> </li> </ul> <div id="first" class="display display_div_1"> This is div 1! </div> <div id="second" class="display display_div_2"> This is div 2! </div> </div>
我的jquery代码取自帖子的第一个答案： https：//stackoverflow.com/questions/30 ...
谢谢！
2 个解决方案
解决方案1
0 2017-04-14 13:22:10
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<H1>Blah</H1>
<div class="body">
<ul>
<li>
<a href="#" method="POST" id='div1' class="number">Display div 1</a>
</li>
<li>
<a href="#" method="POST" id='div2' class="number">Display div 2</a>
</li>
</ul>
<div id="1" class="display display_div_1">
This is div 1!
</div>
<div id="2" class="display display_div_2">
This is div 2!
</div>
</div>
</body>
带脚本
$( document ).ready(function() {
$('.number').click(function() {
$('div').hide(); //you can set a class on your divs and use that if you don't want to hide all divs
$('.body').show();
$('.number').show();
$('#' + this.id.substring(3)).show(); //show just the div you want to show
});
});
解决方案2
0 2017-04-20 08:39:42
在这篇文章中找到了答案： 当用户单击DIV时，使用jQuery隐藏DIV
$('a#div1').click(function() { $("div#1").show(); }); $('a#div2').click(function() { $("div#2").show(); }); $('a#div3').click(function() { $("div#3").show(); }); $(document).mouseup(function (e) { var container = new Array(); container.push($('.display_div_1')); container.push($('.display_div_2')); container.push($('.display_div_3')); $.each(container, function(key, value) { if (!$(value).is(e.target) // if the target of the click isn't the container... && $(value).has(e.target).length === 0) // ... nor a descendant of the container { $(value).hide(); } }); });
div.body { background-color: white; width: 100%; height: 400px; border: 1px solid grey; } div.display_div_1 { display: none; } div.display_div_2 { display: none; } div.display_div_3 { display: none; } ul { margin: 0 0 30px 0; padding: 0px; } li { display: inline-block; } a.display { display: inline-block; background-color: lightblue; padding: 10px 20px; text-decoration: none; } div.display { background-color: grey; width: 100px; height: 100px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <H1>Blah</H1> <div class="body"> <ul> <li> <a href="#" method="POST" id='div1' class="number">Display div 1</a> </li> <li> <a href="#" method="POST" id='div2' class="number">Display div 2</a> </li> <li> <a href="#" method="POST" id='div3' class="number">Display div 3</a> </li> </ul> <div id="1" class="display display_div_1"> This is div 1! </div> <div id="2" class="display display_div_2"> This is div 2! </div> <div id="3" class="display display_div_3"> This is div 3! </div> </div> </body>
单击锚点内的div时取消锚点
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.