0

最後のliを選択した状態で表示しようとしていますが、最初はそのサブメニュー項目も表示する必要があります。

だからここに私が試したデモリンクがあります。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Test Page</title>
        <link rel="stylesheet" href="styles/master.css" type="text/css" media="screen" title="no title" charset="utf-8">

        <script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/modernizr-1.6.min.js" type="text/javascript" charset="utf-8"></script>

    </head>
    <body>
        <div class="page">
            <header>
                <figure>
                    <img src="images/logo.png" width="48" height="49" alt="Logo">
                    <figcaption>
                        <h1>Company Name</h1>
                    </figcaption>
                </figure>
                <nav>
                    <ul>
                        <li><a href="home.html">Home</a></li>
                        <li><a href="aboutus.html">About Us</a></li>
                        <li class="submenuHeader">
                            <a href="products.html">Products</a>
                            <ul class="submenu">
                                <li><a href="webpage.html">Web Page</a></li>
                                <li><a href="mobileapp.html">Mobile App</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </header>
            <section>
                <h1>Lorem Ipsum dolor</h1>
                <h3>Lorem Ipsum dolor sit ame</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </section>
            <form action="Test_submit" method="get" accept-charset="utf-8">
                <h3>Registration Form</h3>
                <label for="first_name">First Name</label><input type="text" name="first_name" value="" id="first_name">
                <label for="Email">Email</label><input type="text/submit/hidden/button" name="" value="" id="">
                <label for="country">Country</label><input type="text/submit/hidden/button" name="country" value="" id="country">
                <p><input type="submit" value="Submit" class="button"></p>
            </form>
        </div>
    </body>
</html>
4

2 に答える 2

0

リンク リストでアクティブな選択を表示するには、各ページの「アクティブな」クラスを変更する必要があります。

以下の例では、"Products" メニューが "active" に設定され、"Web Page" SubMenu リンクが "active-submenu" に設定されています。

<ul>
  <li><a href="home.html">Home</a></li>
  <li><a href="aboutus.html">About Us</a></li>
  <li class="submenuHeader active"><a href="products.html">Products</a>
    <ul class="submenu">
      <li class="active-submenu"><a href="webpage.html">Web Page</a></li>
      <li><a href="mobileapp.html">Mobile App</a></li>
    </ul>
  </li>
</ul>

上記の「アクティブ」クラスの css コードは次のとおりです。どのすべてのアクティブなクラスが太字のクラスを持つか。

.active {
  font-weight: bold;
}
.active-submenu {
  font-weight: bold;
  color: blue;
}

そのため、持っている各 .html ファイルで、「アクティブな」クラスを持つ人の外観を太字に変更します。

クラスを動的に変更することに関心がある場合は、javascript/jQuery を使用して「クラスを追加」または「クラスを変更」する必要がある場合があります。準備ができている場合は、ここにリンクがあります - jquery change class name .

于 2013-01-07T18:19:33.770 に答える
0

まず、投稿する前にすべての js エラーを取り除きます。他のユーザーはローカル ディレクトリにアクセスできないため、オンラインで投稿するときは、ホストされている jQuery リンクを使用してみてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

head セクションに次のようなものを追加します。

$(document).ready(function () {
      $('ul.submenu').css({'display':'block'});
});

セレクターを変更して、より動的にすることができます。私が投稿したのは、あなたにアイデアを与えることだけです。また、サブメニュー項目の CSS を変更することも忘れないでください。

于 2013-01-07T18:14:31.610 に答える