-1

アプリケーションのすべてのページに含まれる header.jsp があります。ヘッダーには、4 つのページ リンクを含むナビゲーション メニューも含まれています。ユーザーがこれらのリンクのいずれかをクリックしてそれぞれのページに移動すると、ページ全体がリロードされます。ヘッダーの現在のページのリンクの色を変更するにはどうすればよいですか? 以下はヘッダーです。

<td class="navBtn"  onClick="className='navBtnSel';"><a href="ReportingTemplate.jsp"     class="bannerHeader" title="Reporting Search"  target="_parent">Customer</a></td>
                <td class="navBtn"  onClick="className='navBtnSel';"><a href="BraTemplate.jsp" class="bannerHeader" title="Reporting Search"  target="_parent">Branch</a></td>
                <td class="navBtn"  onClick="className='navBtnSel';"><a href="DDReportTemplate.jsp" class="bannerHeader" title="Reports"  target="_parent">Reports</a></td>
                <td class="navBtn"  onClick="className='navBtnSel';"><a href="CreateUserprf.do" class="bannerHeader" title="Create User"  target="_parent">Create User</a></td>
                <td class="navBtn"  onClick="className='navBtnSel';"><div style="padding-right: 14px;"><a href="LogOutAction.do" class="bannerHeader" title="Log Out"  target="_parent">Log Out</a></div></td>

このヘッダーは、以下のように他のページに含まれています。

 <tr>
      <td colspan="2" align="left"><iframe src ="Header.jsp?stflg=C" name="head" scrolling="no" frameborder="0" id="head" style="height: 150px; width: 100%;"></iframe></td>
  </tr>
    <tr>
      <td id="searchCell" width="21%" align="left"><iframe style="height: 590px; margin-left: 10px; margin-right: 0px; width: 250px;" frameborder="0" id="search" name="search" src ="SearchFill.do" scrolling="no"></iframe></td>
      <td id="bodyCell"width="79%"><iframe style="height: 590px; border-collapse: collapse; width: 100%;" frameborder="0" id="body" name="body" scrolling="auto" src="body.jsp"></iframe></td>
  </tr>

フロントエンド初心者です。助けてください。

4

3 に答える 3

0

まず、現在のページを確実に識別する方法が必要です。各 body タグに一意の ID を追加し、各リンクに ID を追加すると効果的であることがわかりました。結果は次のようになります。

<body id="about">
  ....
  <nav>
    <a class="n-main" href="main.html">
    <a class="n-about" href="about.html">
  </nav>

次に、次のような仕様で現在のリンクのスタイルを変更できます。

body#main a.n-main, body#about a.n-about { color: red; }

の中にあるリンクだけがbody#about赤くなります。

バックエンド コードを使用.currentして、適切なリンクにクラスを追加し、そのスタイル仕様を記述することもできます。

于 2012-10-16T21:15:06.157 に答える
0

で行おうとしている「インクルード」を処理するには、いくつかのサーバー側のテクノロジを調査する必要がありますiframe。(PHP、ASP.NET など)

このiframeアプローチでは、ページ間の移動が必要以上に複雑になります。

于 2012-10-16T21:17:36.183 に答える
0

各メニューリンクに menu_id のようなものを追加できます。例：

<a href="BranchTemplate.jsp?menu_id=2" ... </a>

menu_id 変数は、アクティブなメニューを識別するために使用されます。

于 2012-10-16T21:06:58.380 に答える