隐藏可见性所占用的额外间距：隐藏
[英]hide the extra spacing taken by visibility:hidden
问题描述
hello i want to hide the extra spacing taken by visibility:hidden . 
你好，我想隐藏visibility:hidden所花的额外间隔visibility:hidden 。 In the code when i select sort by date then it is replaced by default content, but when select sort by topic it comes under sort by date output. 在代码中，当我选择sort by date它将替换为默认内容，但是当选择sort by topic它将归入按日期排序输出。 But i don't want this. 但我不要这个。 I want to replace o/p of sort of topic to sort by date . 我想替换sort of topic sort by date 。 I think it comes because of using visibility:hidden . 我认为这是由于使用了visibility:hidden 。 Can anyone suggest me how i remove that space. 谁能建议我如何删除该空间。 I used display:none too, but no use. 我也使用display:none ，但没有用。
<html>
<head>
<script>
function onloadfun()
{
document.getElementById("hideall").style.visibility="hidden";
}
function optionCheck()
{
if( document.getElementById("sorting").value=="bydate")
{
document.getElementById("topic1").style.visibility ="visible";
document.getElementById("topic").style.visibility ="hidden";
document.getElementById("showByDefault").style.display ="none";
}
if( document.getElementById("sorting").value =="bytopic")
{
document.getElementById("topic1").style.visibility ="hidden";
document.getElementById("topic").style.visibility ="visible";
document.getElementById("showByDefault").style.display ="none";
}
// validation of dropdownlist
var x = document.getElementById("sorting");
var option = x.options[x.selectedIndex].value;
var strUser1 = x.options[x.selectedIndex].text;
if(option=="s")
{
document.form.options.focus();
return false;
}
return true;
}
</script>
</head>
<body onLoad="onloadfun()">
<form name="form">
<select id="sorting" style="width:140px" onChange="optionCheck()">
<option id="s">---Sort By----</option>
<option value="bydate">Sort By Date</option>
<option value="bytopic">Sort By Topic</option>
</select>
</form>
<br /><br /><hr /><br /><br />
<?php include 'connection.php'; ?>
<div id="showByDefault">
<?php
echo "default content";
?>
</div>
<div id="hideall">
<div id="topic1">
<?php echo "hideing 1"; ?>
</div>
<div id="topic">
<?php echo "hideing 2"; ?>
</div>
</div>
</body>
</html>
3 个解决方案
解决方案1
1 已采纳 2015-02-07 05:16:27
Change your code as follows. 如下更改代码。 I preferred to use display:block and display:none instead set visiblity and also recommend jquery $(selector).show() and $(selector).hide() method. 我更喜欢使用display：block和display：none来设置可见性，并建议使用jquery $（selector）.show（）和$（selector）.hide（）方法。
<html>
<head>
<script>
function onloadfun() {
document.getElementById("hideall").style.display = "none";
}
function optionCheck() {
if (document.getElementById("sorting").value == "bydate") {
document.getElementById("hideall").style.display = "block";
document.getElementById("topic1").style.display = "block";
document.getElementById("topic").style.display = "none";
document.getElementById("showByDefault").style.display = "none";
}
if (document.getElementById("sorting").value == "bytopic") {
document.getElementById("hideall").style.display = "block";
document.getElementById("topic1").style.display = "none";
document.getElementById("topic").style.display = "block";
document.getElementById("showByDefault").style.display = "none";
}
// validation of dropdownlist
var x = document.getElementById("sorting");
var option = x.options[x.selectedIndex].value;
var strUser1 = x.options[x.selectedIndex].text;
if (option == "s") {
document.form.options.focus();
return false;
}
return true;
}
</script>
</head>
<body onLoad="onloadfun()">
<form name="form">
<select id="sorting" style="width:140px" onChange="optionCheck()">
<option id="s">---Sort By----</option>
<option value="bydate">Sort By Date</option>
<option value="bytopic">Sort By Topic</option>
</select>
</form>
<br />
<br />
<hr />
<br />
<br />
<?php //include 'connection.php'; ?>
<div id="showByDefault">
<?php echo "default content"; ?>
</div>
<div id="hideall">
<div id="topic1">
<?php echo "hideing 1"; ?>
</div>
<div id="topic">
<?php echo "hideing 2"; ?>
</div>
</div>
</body>
Try changing above three function in your code. 尝试在代码中更改以上三个功能。
解决方案2
1 2015-02-07 06:19:27
Some reading: 一些阅读：
The visibility CSS property has two purposes:
- The hidden value hides an element but leaves space where it would have been.
- also collapses XUL elements
In addition to the many different display box types, the value none lets you turn off the display of an element;
An example based on your code but using display and setting it by a class using Element.classList . 一个基于您的代码但使用display的示例，并使用Element.classList通过一个class进行设置。
var sorting = document.getElementById('sorting'), showByDefault = document.getElementById('showByDefault'), topic = document.getElementById('topic'), topic1 = document.getElementById('topic1'); sorting.addEventListener('change', function optionCheck(e) { var target = e.target; if (target.value === 's') { console.log('Do something here.'); } else if (target.value === 'bydate') { topic1.classList.remove('hide'); topic.classList.add('hide'); showByDefault.classList.add('hide'); } else if (target.value === 'bytopic') { topic1.classList.add('hide'); topic.classList.remove('hide'); showByDefault.classList.add('hide'); } }, false);
#sorting { width: 140px; } hr { margin-top: 2em; margin-bottom: 2em; } .hide { display: none; }
<form name="form"> <select id="sorting"> <option value="s">---Sort By----</option> <option value="bydate">Sort By Date</option> <option value="bytopic">Sort By Topic</option> </select> </form> <hr> <div id="showByDefault">"default content";</div> <div id="topic1" class="hide">"hiding 1";</div> <div id="topic" class="hide">"hiding 2";</div>
The example is using unobtrusive JavaScript and unobtrusive CSS. 该示例使用unobtrusive JavaScript和不干扰CSS。
解决方案3
0 2015-02-07 05:11:11
Use display:none instead of visibility hidden . 使用display：none而不是hidden的可见性 。
See example: http://www.w3schools.com/css/css_display_visibility.asp 参见示例： http : //www.w3schools.com/css/css_display_visibility.asp
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.