1

見栄えの良いメニュー/タブを作成する方法を説明する多くのチュートリアルがオンラインで公開されています。jQueryにはたくさんのメニュープラグインがあります。

しかし、クリックしたメニューに対応する特定のページにいるときに、クリックしたメニューを強調表示したままにする方法がわかりません。

ファイルに加えられたスタイルの変更が更新されたメニューを表示するように、これをプレーンな html/css/JS で行い、それも単一のヘッダー ファイルで行いたいと考えています。

たとえば、Home、Tuts、Contact Us の 3 つのメニュー (サブメニューなし) があるとします。<ul>CSSを使用してそれらを作成し、スタイルを設定できます。クリックを別のページに誘導できるように、内部に s を含めることができます<a>。ul全体<ul>を個別のファイル header.jsp に入れ、そのファイルをすべてのページの上部に含めて、header.jsp への変更がすべてのページに反映されるようにしました。しかし、メニューをクリックしてページが開いたときに、そのメニューが何らかの方法で強調表示されたままになるようにするにはどうすればよいですか (バックカラーなど)、そのページがどのメニューに属しているかがわかります。

4

2 に答える 2

1

たとえば、サーバーで PHP を実行していて、URL ポインティングが次のようになっているとします。

http://localhost/?tab=new

最初はこのようにコードを持っています：

<ul class="tabs">
    <li>New</li>
    <li>Old</li>
    <li>Bye</li>
</ul>

そして、PHP では、クリックされた値に基づいて何をする必要があるか、次のように指定する必要があります。

<ul class="tabs">
    <li<?php if ($_GET["tab"] == "new") echo ' class="active"'; ?>>New</li>
    <li>Old</li>
    <li>Bye</li>
</ul>

そして.activeクラスで、ルールを書きます。

完全なコードは次のようになります。

<ul class="tabs">
    <li<?php if ($_GET["tab"] == "new") echo ' class="active"'; ?>><a href="/?tab=new">New</a></li>
    <li<?php if ($_GET["tab"] == "old") echo ' class="active"'; ?>><a href="/?tab=new">Old</a></li>
    <li<?php if ($_GET["tab"] == "bye") echo ' class="active"'; ?>><a href="/?tab=new">Bye</a></li>
</ul>

これはPHPの場合です。言語に合わせて変更してください。

同じページでやりたい場合は、jQuery タブなどを使用できます。

于 2013-02-14T07:28:45.807 に答える
1

これを試して

HTML

 <ul>
  <li id="lnkHome">Home
  </li>
  </ul>

脚本

<script>
        $(document).ready(function (event) {
            $("#lnkHome").addClass("highlight");
     });

    </script>

CSS

.highlight
{
    color: Black;
    -moz-box-shadow: inset 0 0 20px #000000;
    -webkit-box-shadow: inset 0 0 20px #000000;
    box-shadow: inset 0 0 20px #000000;
}
于 2013-02-14T07:30:40.067 に答える