隐藏由能见度引起的额外间距：隐藏

你好，我想隐藏visibility:hidden所采用的额外间距。在代码中，当我选择sort by date时，它将被默认内容替换，但是当选择sort by topic时，它会按日期输出进行排序。但我不想要这个。我想将sort of topic的o/p替换为sort by date。我认为这是因为使用visibility:hidden。任何人都可以建议我如何删除该空间。我也使用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>

来源

2015-02-07 user3766182

请删除
标签，然后尝试 – Arun 2015-02-07 05:06:45

删除
inn't工作。删除
是不正确的方法来替换按主题内容排序。 – user3766182 2015-02-07 05:12:23

PHP提供的标记是什么样的？你能举一个简单的例子吗？任何CSS？ – Xotic750 2015-02-07 05:16:31

更改您的代码，如下所示。我倾向于使用display：block and display：none instead into set visiblity and also recommend jquery $（selector）.show（）and $（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>

试着将上面的代码中的三个功能。

来源

2015-02-07 05:16:27

我更改了代码，但仍无法使用。 – user3766182 2015-02-07 06:11:32

你是否改变了我上面提供的三个功能。它正在我的本地机器上测试过。 – 2015-02-07 06:15:00

是@ kamlesh.bar我改变了它，但不工作 – user3766182 2015-02-07 06:17:34

使用显示：无代替可见性隐藏。
请参阅示例：http://www.w3schools.com/css/css_display_visibility.asp

来源

2015-02-07 05:11:11

我也用过，但还是没用。它并没有取代内容。 – user3766182 2015-02-07 05:15:03

一些阅读：

visibility

能见度CSS属性有两个目的：

隐藏值隐藏的元素，但离开它会一直空间。折叠值隐藏表格的行或列。它

也崩溃XUL元素

display

除了许多不同的显示框的类型，该值没有让你关闭的元素的显示;当您使用none时，所有后代元素也将关闭其显示。该文件呈现，仿佛元素没有在文档TRE

根据你的代码，但使用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>

的例子是使用unobtrusive JavaScript和不显眼CSS。

The principles of unobtrusive JavaScript

来源

2015-02-07 06:19:27 Xotic750

是的，这也可以。非常感谢。现在我在查询中得到了两种不同的解决方案。谢谢你。 – user3766182 2015-02-07 06:34:14

隐藏由能见度引起的额外间距：隐藏

回答

相关问题