- ベストアンサー
リンク表示を変えたい！JavaScriptによる非リンクの実装方法とは？
- リンク表示を変える方法について、添付の画像を参考に説明します。
- JavaScriptを使って、リンクを非リンク状態にする方法を解説します。
- また、非リンクの要素には<span class="nonlink">SPANタグ</span>を使用してスタイルを適用することも可能です。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 こんな感じで応用できませんでしょうか。 aタグのhref属性を無くすとリンクにならないことを利用しています。 (正攻法かどうか・・・？他にも方法はあると思います。) 細かいところは手を加えてみてください。とりあえず動いてます。 ==ここからサンプル <html> <head> <style type="text/css"> .nolink { color : #ff0000; font-weight : bold; } #disparea { padding : 5px; width : 300px; height : 150px; border : solid 1px #999999; } </style> <script type="text/javascript"> function ch ( id ) { for ( i = 1; i <= 3; i ++ ) { // lst1～lst3を取得 var obj = document.getElementById("lst"+i); // href属性をセット obj.setAttribute ( "href", "#" ); // classを削除 obj.className = ''; } // クリックされた項目のhref属性を削除しclassにnolinkを設定 document.getElementById(id).removeAttribute ( "href" ); document.getElementById(id).className = 'nolink'; document.getElementById('disparea').innerHTML = id + 'をクリックした状態'; } </script> </head> <body onload="ch('lst1');"> <a href="#" id="lst1" onclick="ch(this.id);return false;">項目1</a> <a href="#" id="lst2" onclick="ch(this.id);return false;">項目2</a> <a href="#" id="lst3" onclick="ch(this.id);return false;">項目3</a> <div id="disparea"></div> </body> </html> ==ここまで
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
http://okwave.jp/qa/q6811946.html のときの質問の回答が、そのままHTMLの項目数を増やせば可能になるように作成してありますが…？
- ORUKA1951
- ベストアンサー率45% (5062/11036)
動的にスタイルを変えたい - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q6811946.html ) でも確認しましたが・・ それはfixやabsoluteで固定されているナビゲーションリンクと、遷移後のナビゲーションリンクのプレゼンテーションと言うことですね。 たとえば The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_uri ) や W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で使われているような・・・
