0

静的なWebサイトを作成しています。現在のタブユーザーが別の色で表示していることを示したいと思いました（通常のナビゲーションメニュータブ以外）。サーバーサイドスクリプトを使用せずにこれを行うにはどうすればよいですか？

前もって感謝します。

4

3 に答える 3

0

from what you say, your website is formed of let's say 3 pages: index.html, about.html, contact.html and your navigation which is common on all 3 pages is Home About Contact, and menu looks like:

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

then in index.html you should add class="active" on first link, in about.html add class="active" on the about link and so on

then in your css file define ul li a.active { background:yellow }

于 2013-02-22T11:40:03.160 に答える
0

ロジックをどのように編成するかによって異なります...たとえば、フロントコントローラーがあり、GETパラメーター（page）で表示される現在のページを取得する場合は、次のことができます。

PHP

$current = $_GET['page'];
print '<ul class="menu">';
while ($page = $pages->getNext()) {
   $label = $page->getLabel();
   if ($page->getName() === $current) {
      print '<li class="menu-item selected">' . $label . '</li>';
   } else {
      print '<li class="menu-item">' . $label . '</li>';
   }
}
print '</ul>';

スクリプトでわかるように、これが現在のページであるかどうかに応じて、さまざまなタイプのリストアイテムを印刷します。それが現在のページである場合、リストアイテムにはクラスがselectedあり、menu-itemそれ以外の場合はメニューアイテムのみです。

フロントエンドから同じことをしたい場合は、次のアプローチを使用できます。

JavaScript

   var menuItems = {
       'info': {
           'label': 'Info',
           'id': 'info-item'
        },
       'home': {
           'label': 'Home',
           'id': 'home-item'
        }
   };
   //...
   function getCurrentPage() {
       var str = window.location.search.replace('?', ''),
           params = str.split('&');
       for (var i = 0; i < params.length; i += 1) {
           var current = params[i].split('=');
           if (current[0] === 'page') {
              return current[1];
           }
       }
       return undefined;
   }
   //...
   var page = getCurrentPage();
   clearCurrentPage();
   setCurrentPage(page);

   //...

   function setCurrentPage(page) {
      var item = pages[page];
      document.getElementById(item.id).className += ' selected';
   }

   function clearCurrentPage() {
      var selected = document.getElementsByClassName('selected');
      for (var i = 0; i < selected.length; i += 1) {
          selected[i].className = selected[i].className.replace(' selected', '');
      }
   }
于 2013-02-22T11:40:51.530 に答える
0

静的なWebサイトを作成しています。現在のタブユーザーが別の色で表示していることを示したいと思いました（通常のナビゲーションメニュータブ以外）。

そのタブをli表すものをクラスのメンバーにします（例class="tab current-page"）。次に、別のスタイルにします。

サーバーサイドスクリプトを使用してこれを行うにはどうすればよいですか？

  • HTMLを手動で編集する
  • プリプロセッサを使用してHTMLを生成する
  • location.href可能なページと比較するJSでクライアント側にそれを行う
于 2013-02-22T11:44:18.517 に答える