0

リンクをクリックしたときにリンクの背景を色に変更しようとしています。jquery を使用した多くの例を見てきました。すっきり見えてシンプルです。私はそれを実装しましたが、基本的にはスタック上の誰かの厚意をコピーして、素敵でシンプルなフィドルをまとめました。私の問題は、リンクが開くと、白い背景が表示され、それが消えてしまうことです。

これは、CSS で :active 疑似クラスを使用しているからだと言う人もいますが、私はまったく使用していません。しかし、それはまさにそのように振る舞っています。

これは、機能する例のフィドルです。http://jsfiddle.net/stewbydoo/9R5CG/15/

私の質問と問題は、このナビゲーションをフィドルにコピーしてコードに入れ、href を実際に別のページにリンクするように変更することです。私のファイル構造は単純で、index.html、about.html、contact.html、およびブログへのリンクがあります。

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

シンプルな .html ページのリンクをクリックすると、リンクは :active 疑似クラスを使用しているように動作しますが、そうではありません。ブログへのリンクをクリックすると、実際にはリンクに背景が追加され、新しいタブでページが開きます。

4

1 に答える 1

1

最初のリンクの 1 つをクリックすると、ページがリロードされます。これが、javascript がリセットされる理由です (したがって、背景のスタイル設定はありません)。

href の値を に変更する#と機能します (ただし、ページはもう変更されません)。

それを修正するには、2 つのオプションがあります。

  1. リンクでのページのリロード (e.preventdefault) を無効にし、ページ コンテンツを ajax (複雑) でロードします。
  2. このサーバー側を管理します (簡単ですが、動的言語が必要です)。

2 については、php を使用していると仮定します。コードは大まかに次のようになります。

<?php
   $pageActiveIndex = false
   if ($_SERVER["REQUEST_URI"] == "index.html") {
      $pageActiveIndex = true;
   }
   //same thing for the other links
?>


<li><a <?php if($pageActiveIndex) echo 'class="activeTab"' ?> href="index.html">Home</a></li>
<li><a <?php if($pageActiveAbout) echo 'class="activeTab"' ?> href="about.html">About</a></li>
<li><a <?php if($pageActiveContact) echo 'class="activeTab"' ?> href="contact.html">Contact</a></li>
<li><a href="someblogaddresshere" target="_blank">Contact</a></li>

もちろん、target=_blankどこにでも追加することもできます...しかし、それがあなたが望んでいる効果であるとは思えません。

編集

あなたのウェブサイトは静的に見えるので、あなたの効果を得るためにあなたができる非常に簡単なことがあります.

カスタム css をスタイルシートの一部のクラス (私は「youarehere」と名付けました) に追加し、すべてのページを開いて変更します。

index.htmlで

<li><a class="youarehere" href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="someblogaddresshere" target="_blank">Contact</a></li>

about.htmlで

<li><a href="index.html">Home</a></li>
<li><a class="youarehere" href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="someblogaddresshere" target="_blank">Contact</a></li>

contact.html で

<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a class="youarehere" href="contact.html">Contact</a></li>
<li><a href="someblogaddresshere" target="_blank">Contact</a></li>
于 2012-11-13T18:38:20.530 に答える