Javascriptでイメージの切り替えとテキストリンク操作

質問

諸先輩方ご教授の程、よろしくお願いいたします。
少々急いでおります。

Javascriptを使用して、イメージ切り替えを行いたいと思っています。
切り替えは、テキストに仕込んだ<a>のonClick時で、
下のような感じのソースコードです。

<a href="#" onClick=" ">今日</a>
<a href="#" onClick=" ">明日</a>
<a href="#" onClick=" ">イベント</a>
<a href="#" onClick=" ">会議</a>
<img src="MainImage">

切り替えで表示する画像は、

・"今日"の"イベント"
・"今日"の"会議"
・"明日"の"イベント"
・"明日"の"会議"

の全部で４枚です。
個々のイメージの変更は簡単にできるのですが・・困っているのは、
例えば、
"今日"の"イベント"の写真が表示されているときは、
下のように、"今日"と"イベント"にリンクが貼られていない状態にしたいのです。
（ページ読み込み時のデフォルトの状態をこの状態にしたいです）

今日
<a href="#" onClick=" ">明日</a>
イベント
<a href="#" onClick=" ">会議</a>
<img src="MainImage">

この状態から、"明日"を選択したら、
画像の切り替えと、下のように"明日"と"イベント"にリンクが貼られていない状態にしたいです。

<a href="#" onClick=" ">今日</a>
明日
イベント
<a href="#" onClick=" ">会議</a>
<img src="MainImage">

うまく説明できなくて、大変申し訳ないのですが、
大変困っているので、助けていただけたら本当に助かります。
よろしくお願いいたします。

回答No.1

fujillin

「今日」「明日」などの表示状態を変えたいのであれば、適用するCSSを切り替えてあげればいいですし、リンク（ご質問文では#になっていますが…）を効かなくしたいのであれば、簡単なのは
1）innerHTMLなどを用いて、HTML自体を書き換える
2）HTMLはそのままで、スクリプト内で判断してreturn falseによってリンクをキャンセルする

を思いつきますが、CSSの切り替えと2）の方法の併用あたりが良いのではないでしょうか？