0

一些人目前正在为一个项目构建一个小界面，我被困在一个点上。目前我有一个setPage()将.current类设置为活动链接的函数。

但是...我想更改可见性 a<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()功能

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));
}
4

2 回答 2

0

试试这个 CSS：

a p {
  display: none;
}

a.current p {
  display: block;
}
于 2013-01-23T20:11:53.273 回答
0

您可以向元素添加另一个类或修改当前类以包含displayorvisibility声明：

a p
{
    display: none;
}

.current
{
    display: block;
}

或者：

a p
{
    visibility: hidden;
}

.current
{
    visibility: visible;
}

display改变元素的显示方式，它有多个值，例如inline, inline-block, block,table等table-cell。当设置为none元素时，根本不再渲染，它本来占用的空间又是空闲的。在这里阅读更多

visibility只是改变元素是否可见，但主要区别display在于元素占用的空间不会被回收，很像使用position: relative. 在这里阅读更多

于 2013-01-23T20:21:32.167 回答