JavaScriptコードを実行するボタンを独自のURLにする方法

Question

私はすでにこれを投稿しましたが、jsFiddleでより詳しく説明します。したがって、再任。

これは既に尋ねられていますが、私はどこからでも探していて、何の助けも見つけられない場合はお詫び申し上げます。

href='#'のアンカーを使用して「タブ」を作成しました。しかし、私が望むのは、button1をクリックするとURLがwww.myurl.com/btn1に変更され、ボタン2をクリックするとwww.myurl.com/btn2になります。

私がwww.myurl.com/btn1にアクセスすると、jsFiddleをクリックしたときにbutton1をそのまま強調表示したいと思います。私はどこでも検索しましたが、これを行う方法は見つけられませんでした。

Answer 1

これを行う最も簡単な方法は、URLのフラグメントを使用して、タブのidを保存することです。 myurl.com#tab1。 URLにフラグメント（location.hashを使用）が含まれていて、デフォルトのタブを設定している場合は、負荷を確認して、タブを変更するのに使用するa要素のhref属性と全く同じメカニズムを使用できます。あなたは（など、反応して、角度）MVXタイプのフレームワークが提供する可能性を探求することをお勧めします

$('.tab-trigger').click(function() { 
 
    showTab($(this).attr('href')); 
 
}) 
 

 
if (window.location.hash) 
 
    showTab(window.location.hash); 
 
    
 
function showTab(tab) { 
 
    $('.tab-content').hide(); 
 
    $(tab).fadeIn(); 
 
}

.tab-content { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#div1" class="tab-trigger">Button 1</a> 
 
<a href="#div2" class="tab-trigger">Button 2</a> 
 
<a href="#div3" class="tab-trigger">Button 3</a> 
 

 
<div id="div1" class="tab-content">div 1</div> 
 
<div id="div2" class="tab-content">div 2</div> 
 
<div id="div3" class="tab-content">div 3</div>