如何更改當前頁面上元素的可見性？

一些目前正在爲一個項目構建一個小界面，並且我被困在一個點上。目前我有一個功能setPage()，它將.current類設置爲活動鏈接。如何更改當前頁面上元素的可見性？

但是...我想將可見性更改爲<p>，以便它在當前頁面變爲活動狀態。

<p>默認隱藏在CSS中。

下面是HTML（順便說一句，指數：1,2,3,4 ......僅用於測試）

<script type="text/javascript" src="activemenu.js"></script> 
</head> 

<html> 
<body> 
<div id="menu"> 
    <ul> 
     <li><a href="index.html">List Item 1<p>1042</p></a></li> 
     <li><a href="index2.html">List Item 2<p>1042</p></a></li> 
     <li><a href="index3.html">List Item 3<p>1042</p></a></li> 
     <li><a href="index4.html">List Item 4<p>1042</p></a></li> 
    </ul> 
    <script language="javascript">setPage()</script> 
    <div id="newalbumtxt"><a href="#">Create new album</a></div> 
</div> 


</body> 
</html>

這裏是setPage() fonction

function extractPageName(hrefString) 
{ 
    var arr = hrefString.split('/'); 
    return (arr.length < 2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase(); 
} 
function setActiveMenu(arr, crtPage) 
{ 
    for (var i=0; i < arr.length; i++) 
    { 
     if(extractPageName(arr[i].href) == crtPage) 
     { 
      if (arr[i].parentNode.tagName != "DIV") 
      { 
        arr[i].className = "current"; 
        arr[i].parentNode.className = "current"; 
      } 
     } 
    } 
} 
function setActiveNbImg(arr, crtPage) 
{ 
    for (var i=0; i < arr.length; i++) 
    { 
     if(extractPageName(arr[i].href) == crtPage) 
     { 
      if (arr[i].parentNode.tagName != "DIV") 
      { 
        arr[i].className = "current"; 
        arr[i].parentNode.className = "current"; 
      } 
     } 
    } 
} 

function setPage() 
{ 
    hrefString = document.location.href ? document.location.href : document.location; 

    if (document.getElementById("menu") !=null) 
    setActiveMenu(document.getElementById("menu").getElementsByTagName("a"), extractPageName(hrefString)); 
} 

function setNbImg() 
{ 
    hrefString = document.location.href ? document.location.href : document.location; 

    if (document.getElementById("menu") !=null) 
     setActiveNbImg(document.getElementById("menu").getElementsByTagName("p"), extractPageName(hrefString)); 
}

來源

2013-01-23 Islander

試試這個CSS：

a p { 
    display: none; 
} 

a.current p { 
    display: block; 
}

來源

2013-01-23 20:11:53 cjhveal

你可以添加另一個類的元素或修改當前一個包括display或visibility聲明：

a p 
{ 
    display: none; 
} 

.current 
{ 
    display: block; 
}

或者：

a p 
{ 
    visibility: hidden; 
} 

.current 
{ 
    visibility: visible; 
}

display改變會顯示你的元素的方式，這有多個值，如inline ，inline-block,block,table,table-cell等。當設置爲none時，該元素不再被渲染，並且其佔用的空間再次釋放。 Read more here

visibility根本改變元素是否可見或不可見，但是從display的主要區別是，由元素所佔用的空間不回收，就像使用position: relative。 Read more here

來源

2013-01-23 20:21:32 Sean

我找到了解決方案！確實很簡單：在CSS中，只需更改格式：a.current p {0} {0} {0} } – Islander

好東西！^_ ^ – Sean

如何更改當前頁面上元素的可見性？

回答

相關問題