2

私はサイトで作業しており、SSI を使用して、Web サイトの各ページにバナー/メニュー/フッターを添付しています。私が抱えている問題は、各ページのメニューに「選択済み」の状態が表示されることです。

混乱を避けるために、navbar 全体が固定の高さ/幅の 1 つの画像であり、ボタンの状態を変更するために位置が変わります。

私がこれまでに持っているもの：

index.html

<!--#include virtual="./global_header.html" -->
<!--#include virtual="./global_footer.html" -->

    /**Yeah, that's it for index.html at the moment. Like I said, a work in progress**/

header.html 

<!DOCTYPE...

<div class="s_container" id="s_menu">
    <ul id="navbar">
        <li id="menu_borderl"><p>[</p></li>
        <li id="menu_home"><a href="index.html" title="Home">Home</a></li>
        <li id="menu_forum"><a href="/forum/" title="Forum">Forum</a></li>
        <li id="menu_apply"><a href="apply.html" title="Apply">Apply</a></li>
        <li id="menu_about"><a href="about.html" title="About">About</a></li>
        <li id="menu_borderr"><p>]</p></li>
    </ul>
</div>...

CSS:

ul#navbar {
    width:1000px;
    list-style:none;
    height:76px;
    margin:0px;
    padding:0px;
}

ul#navbar li {
    display:inline;
}

ul#navbar li a {
    height:76px;
    float:left;
    text-indent:-9999px;
}

ul#navbar li p {
    height:76px;
    float:left;
    text-indent:-9999px;
    margin:0px;
}

/**HOME**/
/**I have these once for each button, with the correct x,y for the bg position**/
ul#navbar li#menu_home a {
    width:205px;
    background:url(images/menu_buttons.png) no-repeat -75px 0;
}
ul#navbar  li#menu_home a:hover {
    background-position:-75px -76px; 
}
ul#navbar  li#menu_home a.current {
    background-position:-75px -152px;
}

class="current"li に追加すると、意図したとおりに機能します。

さて、私の質問です。明らかな場合は申し訳ありませんが、私はこれにかなり慣れていません。「index.html」にコードを配置して、「現在の」クラスを特定の項目に追加する方法はありますか? 助けてくれてありがとう、それがひどく明白である場合は申し訳ありません。さらに詳しい情報が必要な場合は、お知らせください。

解決した

私は新しいので、さらに数時間質問に答えることができませんが、ここに投稿するつもりです：

編集

!important を取り除くために、leftclickbens の提案に従って index.html に入るコードを少し変更しました。

だから私はそれを理解しました。上記の例では、削除しました

ul#navbar  li#menu_home a.current {
    background-position:-75px -152px;
}

CSSファイルから追加

ul#navbar li#menu_home a, ul#navbar li#menu_home a:hover {
    background-position:-75px -152px;
}

index.html に (SSI 間で)

4

2 に答える 2

0

！importantを取り除くために、leftclickbensの提案ごとにindex.htmlに入るコードを少し変更しました

だから私はそれを理解しました。上記の例では、削除しました

ul#navbar  li#menu_home a.current {
    background-position:-75px -152px;
}

CSSファイルから追加しました

ul#navbar li#menu_home a, ul#navbar li#menu_home a:hover {
    background-position:-75px -152px;
}

index.htmlに（SSI間）

于 2013-03-03T03:47:33.710 に答える
0

PHP のような動的なサーバー側言語とは対照的に、「静的な」サーバー側インクルードを使用している場合、最善の策は、現在のページを強調表示する JavaScript メソッドを調べることです。使用しているフレームワーク (jQuery など) に応じて、利用可能なプラグインがたくさんあります。または、要件が単純な場合は、単純な正規表現マッチングで十分です。

于 2013-02-03T06:00:44.080 に答える