0

現在、プロジェクト用の小さなインターフェースを構築している人もいますが、私はある時点で立ち往生しています。現在、クラスをアクティブなリンクに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()関数があります

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

要素に別のクラスを追加するか、現在のクラスを変更してdisplayorvisibility宣言を含めることができます。

a p
{
    display: none;
}

.current
{
    display: block;
}

または：

a p
{
    visibility: hidden;
}

.current
{
    visibility: visible;
}

displayinline要素の表示方法を変更します。これには、inline-block、block、などの複数の値があります。要素tableにtable-cell設定するとnone、要素はまったくレンダリングされなくなり、占有していたスペースが再び解放されます。詳細はこちら

visibilityは要素が表示されるかどうかを変更するだけですが、 との主な違いdisplayは、 を使用する場合と同様に、要素が占有するスペースが再利用されないことposition: relativeです。詳細はこちら

于 2013-01-23T20:21:32.167 に答える
0

この CSS を試してください:

a p {
  display: none;
}

a.current p {
  display: block;
}
于 2013-01-23T20:11:53.273 に答える