更改可見性後背景顏色不適用

更改容器ul標籤的可見性後，粉紅色背景顏色消失。代碼如下。我錯過了什麼？爲什麼li不會繼承ul標籤的背景顏色？更改可見性後背景顏色不適用

<style type="text/css"> 
.div_r3r4_container { width:760px; background-color:lightblue; } 
.div_r3_class  { margin-left:132px; width:630px; } 
.ul_r3hz_class { background-color:pink; font-size:0px; padding:2px 2px 1px 3px;list-style:none;margin:0;  } 
.li_r3hz_class { font-size:14px; color:black; display:inline; } 
.ul_r4hz_class {background-color:yellow; font-size:0px; border:1px solid red; padding:1px 2px 2px 3px;list-style:none;margin:0; } 
.li_r4hz_class {font-size:14px; color:green; display:inline; } 

</style> 



<div id="div_r3_r4_id" class="div_r3r4_container"> 
    <label id="city"> hide and show ul </label> 

    <div class="div_r3_class" > 
     <ul class="ul_r3hz_class" id="sid" > 
      <li class="li_r3hz_class"> aaaa, aaaa1, aaa2, aaa3,  </li> 
      <li class="li_r3hz_class"> aaaaa4, aaaa5, aaaa5, aaa6, </li> 
     </ul> 
    </div>   

     <div class="div_r4_class" > 
     <ul class="ul_r4hz_class" > 
      <li class="li_r4hz_class"> bb, bbb, bbbb, bbbb2, bbbb3 </li> 
      <li class="li_r4hz_class"> bbbb5, bbb6, bbb7, bbb8, </li> 
     </ul> 
    </div>   

</div> 



<div> 
<input id="minus" value="-" type="submit" style="background-color:white; float:right; font-size:6px;" onClick="hide_show_div('sid', 'minus', 'plus'); return flase; "> 
<input id="plus" value="+" type="submit" style="background-color:white; float:right; font-size:6px;" onClick="show_hide_div('sid', 'minus','plus','div_r3_class'); return flase; "> 

</div> 


<script language = "JavaScript"> 

function hide_show_div(hideid1, hideid2, showid1){ 
    hideObjDiv(hideid1) ; 
    hideObjDiv(hideid2) ; 
    showObjDiv(showid1) ; 
} 

function show_hide_div(showdivid1, showid2, hideid1, newclass){ 
    hideObjDiv(hideid1) ; 
    showObjDiv(showid2) ; 
    showObjDiv(showdivid1) ; 
} 
function hideObjDiv(obj) { 
    if (document.getElementById) { 
     document.getElementById(obj).style.visibility = 'hidden'; 
     document.getElementById(obj).style.display = 'none'; 
    } 
} 

function showObjDiv(obj) { 
    if (document.getElementById) { 
     document.getElementById(obj).style.visibility = 'visible'; 
     document.getElementById(obj).style.display = 'inline'; 
    } 
} 
</script>

來源

2013-09-26 user2818066

你能指定你正在隱藏的是哪個元素嗎？ – Jazcash

只需點擊「 - 」，你會看到粉紅色的aaaa文字消失。然後點擊「+」它會回來，但背景顏色是錯誤的。 – user2818066

我在您的JavaScript代碼中發現了一個問題。如您所知，無序列表標記應該默認爲阻止狀態，並且您試圖將其內聯到您的js代碼中（隱藏後）。只是試圖改變你的showObjDiv功能是這樣的：

function showObjDiv(obj) { 
    if (document.getElementById) { 
     document.getElementById(obj).style.visibility = 'visible'; 
     document.getElementById(obj).style.display = 'block'; 
    } 
}

它應該工作得很好之後。

來源

2013-09-26 06:19:33 Soulwish

我會試試看。謝謝。 – user2818066

另外，請修復返程; （看起來像一個錯字）在你的HTML部分。 – Soulwish

設置可見性：隱藏和顯示：無有區別。當您設置display：none該元素將從流中完全移除，並且此元素及其所有屬性和樣式將被刪除。如果OBJ元件具有CSS類* div_r3_class *然後（爲簡單起見，我使用的jQuery）：

function showObjDiv(obj) { 
    if (document.getElementById) { 
     document.getElementById(obj).style.visibility = 'visible'; 
     document.getElementById(obj).style.display = 'inline'; 
     $("#"+obj).addClass('div_r3_class'); 
    }

以這種方式重新顯示元件之後，所指定的類將被連接到其。

來源

2013-09-26 07:18:27 Drupalist

更改可見性後背景顏色不適用

回答

相關問題