[英]How to hide Div in a proper way
In my Asp web application, I have following HTML divs, I need to hide those div by clicking <a>
tag. 在我的Asp Web应用程序中,我具有以下HTML div,我需要通过单击
<a>
标记隐藏这些div。
function showHide() { var viewProductServiceDiv = document.getElementById("psDiv"); var psbGrid = document.getElementById("psbGrid"); var filterDiv = document.getElementById("filterDiv"); if (viewProductServiceDiv.style.display === "none") { psbGrid.style.display = "none"; filterDiv.style.display = "none"; viewProductServiceDiv.style.display = "block"; } else { psbGrid.style.display = "block"; filterDiv.style.display = "block"; viewProductServiceDiv.style.display = "none"; } }
<div class="container-fluid"> <div class="row search-row form-inline" id="filterDiv"> <div class="col-xs-6 text-left"> <a href="#" onclick="showHide(); return false;" style="text-decoration:underline">Show/Hide Divs</a> </div> <div class="col-xs-6 text-right"> </div> </div> <div class="row grid-row"> <div class="col-xs-12"> <div id="psbGrid"> </div> </div> <div class="col-xs-12"> <div id="psDiv"> <button id="backto" class="btn btn-default">Back</button> </div> </div> </div> </div>
The above code works fine, but looking ugly and I think this is not the good coding practices. 上面的代码可以正常工作,但是看起来很丑,我认为这不是好的编码实践。 Have any possible way to improve this good code.
有任何可能的方法来改善此良好的代码。 Can I use the JQuery to do this?
我可以使用JQuery来做到这一点吗? then how?
那怎么办
And I also need to hide psDiv
and show other two divs ( filterDiv , psbGrid
) when clicking the Back button.What is the best way to do this. 而且当单击Back按钮时
filterDiv , psbGrid
我还需要隐藏psDiv
并显示其他两个divs( filterDiv , psbGrid
),这是最好的方法
simply says, I need to hide filterDiv
, psbGrid
divs by clicking <a>
tag and need show those two divs again when click backbutton and need to hide psDiv
div 简而言之,我需要通过单击
<a>
标签来隐藏filterDiv
, psbGrid
div,并且在单击psDiv
按钮时需要再次显示这两个div,并且需要隐藏psDiv
div
You can target the next element by finding the closest .row
, then toggle a class on the element: 您可以通过找到最接近的
.row
来定位下一个元素,然后在该元素上切换一个类:
$('a').click(function(){ $(this).closest('.row').toggleClass('hideContent'); $(this).closest('.row').next().find('#psbGrid').toggleClass('hideContent'); $(this).closest('.row').next().find('#psDiv').toggleClass('hideContent'); }); $('#backto').click(function(){ $(this).closest('.row').prev().toggleClass('hideContent'); $(this).closest('.row').find('#psbGrid').toggleClass('hideContent'); $(this).closest('#psDiv').toggleClass('hideContent'); });
.hideContent{ display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container-fluid"> <div class="row search-row form-inline" id="filterDiv"> <div class="col-xs-6 text-left"> <a href="#" style="text-decoration:underline">Show/Hide Divs</a> </div> <div class="col-xs-6 text-right"> </div> </div> <div class="row grid-row"> <div class="col-xs-12"> <div id="psbGrid"> psb Grid </div> </div> <div class="col-xs-12"> <div id="psDiv" class="hideContent"> <button id="backto" class="btn btn-default">Back</button> </div> </div> </div> </div>
You do not need jquery it's working with viewProductServiceDiv.classList.toggle("toggleCls");
您不需要jquery与
viewProductServiceDiv.classList.toggle("toggleCls");
method. 方法。
<style>
.toggleCls {
display:none;
}
</style>
<div class="container-fluid">
<div class="row search-row form-inline" id="filterDiv">
<div class="col-xs-6 text-left">
<a href="#" onclick="showHide();" style="text-decoration:underline">Show/Hide Divs</a>
</div>
<div class="col-xs-6 text-right">
</div>
</div>
<div class="row grid-row">
<div class="col-xs-12">
<div id="psbGrid">
</div>
</div>
<div class="col-xs-12">
<div id="psDiv">
<button id="backto" class="btn btn-default">Back</button>
</div>
</div>
</div>
</div>
<script>
function showHide() {
var viewProductServiceDiv = document.getElementById("psDiv");
var psbGrid = document.getElementById("psbGrid");
var filterDiv = document.getElementById("filterDiv");
viewProductServiceDiv.classList.toggle("toggleCls");
}
</script>
Here is https://jsfiddle.net/ptxdsvwn/7/ 这是https://jsfiddle.net/ptxdsvwn/7/
The easiest way to do that would be by using jQuery and doing something like this 最简单的方法是使用jQuery并执行类似的操作
$('a').click(function(){
$("#filterDiv, #psbGrid").hide();
});
$('#backto').click(function(){
$("#filterDiv, #psbGrid").show();
});
Fiddle: https://jsfiddle.net/sarbraj/3ky0xv94/7/ 小提琴: https : //jsfiddle.net/sarbraj/3ky0xv94/7/
You can use jquery.You need to include jQuery library. 您可以使用jquery。您需要包含jQuery库。
<script type="text/javascript" language="javascript">
function HideDiv()
{
$("#filterDiv").hide();
$("#psbGrid").hide();
$("#psDiv").show();
}
function ShowDiv()
{
$("#filterDiv").show();
$("#psbGrid").show();
$("#psDiv").hide();
}
</script>
<div class="container-fluid">
<div class="row search-row form-inline" id="filterDiv">
<div class="col-xs-6 text-left">
<a href="#" onclick="HideDiv();" style="text-decoration:underline">Show/Hide
Divs</a>
</div>
<div class="col-xs-6 text-right">
</div>
</div>
<div class="row grid-row">
<div class="col-xs-12">
<div id="psbGrid">
</div>
</div>
<div class="col-xs-12">
<div id="psDiv" style="display:none">
<button id="backto" onclick="ShowDiv();" class="btn btn-
default">Back</button>
</div>
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.