9

これは私の最初の投稿です。私は Web 開発の世界ではまだ新しいので、ご容赦ください。

通常、Web サイトを作成しようとするときは、多くの html ファイルに同じヘッダーを複数持つのではなく、すべてのページで一度だけデータを変更するように、header.html と footer.html というファイルを作成します。そして、ページごとに含まれるコンテンツとphpコードとともに、それらすべてをphpファイルに含めます。

今私の問題は、ヘッダーが1つしかないためです.cssは、現在のメニュー/タブが何であれ、「選択済み」としてマークされるように設計されているため、現在どのページにいるかがユーザーに明らかになります.

私の質問は、この問題をどのように解決するかです:

1.)class="selected"現在のページ/URL に依存するようにします。

<!--Menu Starts-->
        <div class="menu">
            <div id="smoothmenu" class="ddsmoothmenu">
                <ul>
                    <li><a href="index.php" class="selected">Home</a></li>
                    <li><a href="about.php">About</a> </li>
                    <li><a href="services.php">Services</a> </li>
                    <li><a href="features.php">Features</a></li>
                    <li><a href="#">Support</a>
                        <ul>
                            <li><a href="support1.php">Support 1</a></li>
                            <li><a href="support2.php">Support 2</a></li>
                         </ul>
                    </li>
                </ul>
             </div>
        </div>
<!-- Menu Ends--!>

ありがとうございました ：）

4

6 に答える 6

13

javascript / php以外のアプローチを探しているなら...

最初に、どのナビゲーション リンクをアクティブに設定するかを決定し、選択したクラスを追加する必要があります。コードは次のようになります

PHPファイル内のHTML

<a>リンク先リクエスト uri を渡すハイパーリンク マークアップ内でインラインで PHP 関数を呼び出す

<ul>
    <li><a href="index.php" <?=echoSelectedClassIfRequestMatches("index")?>>Home</a></li>
    <li><a href="about.php" <?=echoSelectedClassIfRequestMatches("about")?>>About</a> </li>
    <li><a href="services.php" <?=echoSelectedClassIfRequestMatches("services")?>>Services</a> </li>
    <li><a href="features.php" <?=echoSelectedClassIfRequestMatches("features")?>>Features</a></li>
    <li><a href="#">Support</a>
        <ul>
            <li><a href="support1.php" <?=echoSelectedClassIfRequestMatches("support1")?>>Support 1</a></li>
            <li><a href="support2.php" <?=echoSelectedClassIfRequestMatches("support2")?>>Support 2</a></li>
         </ul>
    </li>
</ul>

PHP 関数

php 関数は、渡されたリクエスト uri を比較するだけでよく、レンダリングされている現在のページと一致する場合は、選択されたクラスが出力されます。

<?php
function echoSelectedClassIfRequestMatches($requestUri)
{
    $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

    if ($current_file_name == $requestUri)
        echo 'class="selected"';
}
?>
于 2013-04-02T21:54:43.670 に答える
0

私の悪い英語で申し訳ありませんが、それが役立つかもしれません. このタスクには jQuery を使用できます。このためには、ページの URL をメニューのアンカーに一致させてから、選択したクラスをそれに追加する必要があります。たとえば、jQuery コードは次のようになります。

    jQuery('[href='+currentURL+']').addClass('selected');
于 2014-10-03T10:27:18.613 に答える