定番
履歴

JS aタグを使わないリンクいろいろ

JS aタグを使わないリンクいろいろ

Aタグ以外でもリンクを設置する機会は、結構発生します。 そんな時はJavaScriptで対応になります。

JSとjQueryのそれぞれの使用例を記載しました。

通常のリンク遷移 (ブラウザ履歴に残る)

window.location.href = 'URL'; 

新しいタブを開き、ページを表示

window.open('URL', '_blank'); 

フレームやアイフレームの内側からフレームを解除してリンクします

top.location.href="URL";

親フレームだけ解除してリンクします

parent.location.href="URL";

replaceで対応するとブラウザ履歴に残りません

location.replace('URL');

以下は同じURL上でサイト内でのリンクを変更するサンプルです

URLに#で記述されるハッシュ情報をリンクさせます

window.location.hash = "#hash_word";

URLに?以降で記述されるクエリ情報のみを変えてリンクさせます

window.location.search = "?search=keyword"

以下はjQueryを使ったリンクを貼る時の例

$(function(){
	//追加した要素までクリックが有効
	$('#link_1').on('click',function(){
	     window.location.href = 'URL'; 
	});

	//表示された要素だけクリックが有効
    $('#link_1').click(function() {
        window.location.href = 'URL'; 
    });
});
<div id="link_1" class="btn">サンプルボタン</div>

以下はJavaScriptのみでのリンクの例

function link_2(){
    location.href = "http://www.kipure.com/";
}
<input type="button" name="link" value="サンプルボタン2" onclick="link_2()">

onclick は、使われそうなタグには大体対応している属性です。

実装可能な主なタグ(a div li h1-6 img p)。


ついでですが、アラートを出してリンクを貼る時は以下の記述が便利です。

function link(){
  if (confirm("リンク先へ遷移しますか?")==true)
    location.href = "http://www.kipure.com/";
}
2017-11-04 13:11:41
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top