0

YouTube (www.youtube.com/friedpanseller) のようなナビゲーション セクションがホーム、ビデオ、概要、ディスカッションに必要です。それらを強調表示するかクリックすると、赤いバーが表示されます。その赤いバーを表示するにはどうすればよいですか。

4

1 に答える 1

1

この例を使用して問題を説明します

アクティブなアイテムの状態を維持したい場合は、すべての html ファイルに navbar レイアウトを含める必要があります。たとえば、[Research] をクリックした場合、research.html のナビゲーション バーは次のようになっている必要があります。

<div class="navbar">
<div class="navbar-fixed-top">
  <div class="container" style="width: auto;">
      <div class="nav-collapse" id="nav-collapse">
      <ul class="nav" id="nav">
        <li ><a href="#skdill" >skisll</a></li>
        <li ><a href="#skill">skill</a></li>
        <li class="active"><a href="#research">research</a></li>
        <li ><a href="#">Link</a></li>
                 </ul>
    </div>
  </div>
</div>
And so on for all your links.

EDIT You can use JavaScript and do the trick:

<!DOCTYPE html>
<html>
   <head>
     <script src="js/jquery.min.js"></script>
     <script src="js/bootstrap.min.js"></script>
     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
     <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
     </style>
  </head>

  <script>
     $(function() {
        $('#nav li a').click(function() {
           $('#nav li').removeClass();
           $($(this).attr('href')).addClass('active');
        });
     });
  </script>

  <body>
     <div class="navbar">
        <div class="navbar-fixed-top">
           <div class="container" style="width: auto;">
              <div class="nav-collapse" id="nav-collapse">
                 <ul class="nav" id="nav">
                     <li id="home"><a href="#home">Home</a></li>
                     <li id="skill"><a href="#skill">Skill</a></li>
                     <li id="research"><a href="#research">Research</a></li>
                     <li id="link"><a href="#link">Link</a></li>
                 </ul>
              </div>
           </div>
        </div>
     </div>
  </body>
</html>
于 2013-10-15T04:31:46.333 に答える