1

現在のページを他のリンクとは異なる背景色に設定する方法を見つけようとしましたが、役に立ちませんでした。

HTML

<div id="navigation">
    <ul>
        <li><a href="<?php echo base_url() ?>index.php/home">Home</a></li>
        <li><a href="<?php echo base_url() ?>index.php/portfolio">Portfolio</a></li>
        <li><a href="<?php echo base_url() ?>index.php/about">About</a></li>
        <li><a href="<?php echo base_url() ?>index.php/gallery">Gallery</a></li>
        <li><a href="<?php echo base_url() ?>index.php/blog">Blog</a></li>
    </ul>
</div>

私が望むのは、現在アクティブなリンクを黒に設定し、他の 4 つのリンクを灰色に設定することです。そうすれば、たとえばPortfolioにアクセスすると、そのリンクは黒で残りは灰色になります。どうすればいいですか？

4

2 に答える 2

0

2つのオプションがあります。PHPとCSSを使用できます。これはクライアントに依存しないため、これが優れています。2番目のオプションはJavascriptとCSSを使用することです

PHPとCSS
私はこの方法が好きです！現在のページが各メニューリンクと等しいかどうかをすべてのサイトで確認する必要があります。これが私のソリューションのスニペットです。私のサイトでは問題なく動作します。それがあなたのリンク方法で機能しているかどうかはわかりません：index.php/home。あなたはそれを適応させなければならないと思います。home.phpやblog.phpのような実際のファイルを使用しているため

これはmenu.phpです、私はそれをすべてのサイトに含めます：

    <div id="menu">
        <div class="innertube">
        <ul>
<?
markIfCurrent("Willkommen", "willkommen");
markIfCurrent("Salzgrotte", "salzgrotte-am-fehn");
markIfCurrent("Heilwirkung", "heilwirkung-des-salzes");
markIfCurrent("Farbtherapie", "farblichttherapie");
markIfCurrent("Salzshop", "salzshop");
markIfCurrent("Erfahrungs-<br/>berichte", "erfahrungsberichte");
markIfCurrent("Fragen und Antworten", "fragen-und-antworten");
markIfCurrent("Preise", "preise");
markIfCurrent("Galerie", "galerie");
markIfCurrent("Presse", "presse");
markIfCurrent("Praxis", "praxis");
markIfCurrent("Anfahrt", "anfahrt");
?>
        </ul>
        </div>
    </div>

これでphp関数は次のようになります。

/* filter selected menu items */
function markIfCurrent ($name, $link) {
    $should_mark = isCurrent($link);
    if ($should_mark) {
        $first = strtoupper(substr($name, 0, 1));
        $rest = substr($name, 1);
        echo "<li><span class='current'>".$name."</span></li>\n";
    } else {
        echo "<li><a class='lower' href='".$link."'>".$name."</a></li>\n";
    }
}

/* check if $pageis current page */
function isCurrent ($page) {
    /* reverse mapping */
    if ($page == "willkommen") {
        $page = "index";
    }
    $isCurrent = $page.".php" == getCurrentPage();
    return $isCurrent;
}

function getCurrentPage() {
    $path = $_SERVER['PHP_SELF'];
    $a = explode("/", $path);
    $site_name = $a[sizeof($a)-1];
    return $site_name; 
}

少なくともCSS：

li span.current a {
    background-color: black; /* or #000000 */
}
li span a {
    background-color: gray; /* or #cccccc*/
}

JavaScriptとCSS
これはより疑似的なコードですが、PHPバージョンと同じロジックです

この場合window.location.pathname、URL/パス名を取得して現在のURLも確認する必要があります。スラッシュで分割し、ファイルを抽出します。次に、jQueryのようにナビゲーションの要素を反復処理してから、要素の$("#navigation").find("a")cssスタイルを設定できます。a.css("background-color", "black")

于 2012-06-04T23:19:21.913 に答える
0

ありがたいことに、Javascript は関係ありません。HTML と CSS は、このタスクでは問題なく機能します。まず、HTML を作成しましょう。どのページにいるかは明らかなので、現在のページのリンクにクラスを追加します。したがって、たとえば、/index.php/homeマークアップがこれに似ている場合があります。

<div id="navigation">
    <ul>
        <li><a class="current" href="<?php echo base_url() ?>index.php/home">Home</a></li>
        <li><a href="<?php echo base_url() ?>index.php/portfolio">Portfolio</a></li>
        <li><a href="<?php echo base_url() ?>index.php/about">About</a></li>
        <li><a href="<?php echo base_url() ?>index.php/gallery">Gallery</a></li>
        <li><a href="<?php echo base_url() ?>index.php/blog">Blog</a></li>
    </ul>
</div>

さて、現在のリンクに色を付ける前に、残りのリンクに色を付けます。このように CSS を介して残りのリンクを選択できます。

#navigation a {
}

次の CSS は、要素<a>の子であるすべての要素を選択しますnavigation。そのため、背景色を設定する必要があります。背景色を設定する CSS プロパティはbackground-color: xxx. は、16 進コード、 RGBxxx値、または色の名前のいずれかです。したがって、すべてのリンクをグレーにするには、次のようにします。

#navigation a {
    background-color: #333; /* or whatever grey you want. */
}

これにより、すべてのリンクが灰色に設定されます。ここで、現在のリンクを黒に設定する必要があります。

お気づきかもしれませんがclass="current"、現在のリンク、この場合はホームリンクに追加されています。次に、これに適したスタイルを作成する必要があります。CSS 宣言は次のようになります。

#navigation .current {
}

上記の宣言はcurrent、要素の子であるクラスを持つすべての要素に適用されますnavigation。そして今、背景色をそのように設定します。

#navigation .current {
    background-color: #000;
}

したがって、最終的な CSS は次のようになります。

#navigation a {
    background-color: #333;
}

#navigation .current {
    background-color: #000;
}

順番が重要なので注意！2 番目の宣言を最初に置くと、より一般的なリンク宣言によって上書きされます。

于 2012-06-04T23:14:08.477 に答える