0

クリックされたときにハイパーリンクの色を変更したかった。

私は次のコードを使用しましたが、うまくいきました：

var current = "home";

function home()
{
    current = "home";
    update2();
}

function comp()
{
    current = "comp";
    update2();
}

function team()
{
    current = "team";
    update2();
}

function cars()
{
    current = "cars";
    update2();
}

function spons()
{
    current = "spons";
    update2();
}

function update2()
{
    if (current == "home"){
        document.getElementById('home').style.cssText='color:#FFE006;font-size:20pt;text-   shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
        document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
        document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
        document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
        document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
    } else if (current == "comp"){
        document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
        document.getElementById('comp').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
        document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
        document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
        document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
     } else if (current == "team"){
         document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('team').style.cssText='color:#FFE006;font-size:20pt;text-shadow:  -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
         document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
     } else if (current == "cars"){
         document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('cars').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
         document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
     } else if (current == "spons"){
         document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('spons').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
     }
 }

実際、うまくいきましたが、問題が発生しました。ご覧のとおり、 が にcurrent設定されているときに、色、サイズ、テキストの影などのプロパティを変更しようとしましたhome/spons/cars/team/comp。currentユーザーがハイパーリンクをクリックしたときに関数が呼び出されると変更されます。

のときに同じプロパティを実行するように指示したため、問題が発生します:hover。ボタンがクリックされると、そのプロパティが変更され、他のハイパーリンクも白色で 18 ポイントのサイズに変更されます。

ユーザーがハイパーリンクをクリックすると、フレームのソース、独自のプロパティ、および他のハイパーリンクのプロパティが変更されます。しかし、それをクリックしてから別のハイパーリンクにカーソルを合わせると、ホバーのプロパティは機能しませんが、javascript のプロパティは機能します。

私の問題を理解できない場合は、http://www.xphoenix1.hpage.com/をご覧ください。1 つのメニュー ボタンがクリックされると、他のボタンのプロパティも変更され、ホバー プロパティが停止します。

私の言っていることが理解できて、解決策をお持ちでしたら、回答をお願いします。

前もって感謝します

4

4 に答える 4

1

OPに公平を期すために、彼らは単なるテキストの色以上のいくつかの変更に影響を与えたいと考えていました. 残念ながら、:visited 状態のほとんどのスタイリングは、以前のようには機能しなくなりました。

フォントの色に加えて、フォントサイズを少し大きくしたり、テキストの影を追加/削除したりしています。

ただし、この JS のアプローチは少しやり過ぎです。

OPへの私の提案は、divを交換するだけでなく、メニューリンクを実際に別のページに移動させることです。次に、「現在の」クラスの移動をリンクからリンクに移動できます。これが静的 HTML の場合は手動でも構いません。次に、それに応じてスタイルを設定します。

a.current {  //styles }

この方法により、問題が発生する可能性が大幅に減少し、ナビゲーションは HTML と CSS でのみ機能し、JS は必要ありません。

于 2012-09-28T12:18:02.893 に答える
1

これはcssで簡単です

a:hover{background-color:yellow;}
于 2012-10-30T14:38:11.600 に答える
0

次に使用します

#home:visited, #comp:visited{
    color:red;
}

または、関連するすべてのアンカーに className を適用します。

.rav:visited{ color:red; }

乾杯！

于 2012-09-28T12:17:48.863 に答える
0

ハイパーリンクのテキストの色を書く、このように書く

a:visited{
    color:red;
    }

更新しました：

わかりました。JQuery を使用する場合、メニューを<li>やその他の要素として使用し、これらの画像を背景画像として使用するという考えです。写真を作成すると、白いテキストと黄色の両方が上下に表示されます（CSSスプライト）。メニューをクリックすると、selectedというクラスを現在の要素に追加し、画像を上に移動して黄色のテキストが表示されるようにしてから削除します他のすべてのメニューから選択したクラス。<a>たとえば、たとえばタグを使用しました。

.menu a{
   background-image:url('images/button.png');
}
.menu a.selected {
     background-image:url('images/button.png'):0 -50px;
}

$(".menu a").live('click', function() {
  $(".menu a").removeClass("selected");
  $(this).addClass("selected");
  return false;
});

ここでこの投稿を確認してください

于 2012-09-28T11:57:57.730 に答える