隱藏由能見度引起的額外間距：隱藏

你好，我想隱藏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

隱藏由能見度引起的額外間距：隱藏

回答

相關問題