その場で HTML 内のリンクに #ハッシュタグを追加します

StackOverflow https://stackoverflow.com/questions/3884949

  •  28-09-2019
  •  | 
  •  

質問

私はナビゲーションを持っています。ナビゲーション内の各リンクは、ライブフィルタリングなどのために、クリックされたときに既存のURLにハッシュタグを追加するだけです。jQueryを使って。

同じ現在のハッシュタグを、ページのさらに下にある div 内の一連のリンクに追加したいと考えています。

たとえば、「work」をクリックすると、URL は次のようになります。

http://www.domain.com/page.html#work

ページ内に一連のリンクがあります。

<div id="links">
<ul>
  <li><a href="http://www.domain.com/link1">Link1</a></li>
  <li><a href="http://www.domain.com/link2">Link2</a></li>
  <li><a href="http://www.domain.com/link3">Link3</a></li>
  <li><a href="http://www.domain.com/link4">Link4</a></li>
</ul>
</div>

div#links 内のこれらのリンクは、クリックされたときにハッシュタグが追加されるように、すべての URL に #work を追加するためにオンザフライで更新する必要があります。

これは可能でしょうか?これには意味がありますか?

役に立ちましたか？

解決

だしを添付してくださ click イベントハンドラのためのリンク #nav 変更リンク #links ます。 [での行動]

Javascript

$("#nav a").click(function() {
  $("#links a").each(function() {
    this.href = this.href.split("#")[0] + "#" + window.location.hash;
  });
});​

HTML

<div id="nav">  
  <a href="#work">work</a> - 
  <a href="#school">school</a>
</div>

他のヒント

をご利用 hash 物件へのリンクの設定フラグメント識別子なしの相談にの href:

$('#links a').each(function() {
    this.hash= location.hash;
});​​​​​​​

以下の jQuery コードは選択します それぞれ <a> 内で <li> 内で の <div> ID付き の links そして href 属性を変更する 現在の値と同じになりますが、 現在のページのハッシュが追加される.

$("div#links li a").each(
  function(index, element){
     $(this).attr('href',$(this).attr('href') + window.location.hash)
  });

してみてください:

$(function() {
    $('#links a').each(function() {
        $(this).attr('href', $(this).attr('href')+'#work');
    });​​​​​​​
});

$('#links li a').each(function()
{
    $(this).attr('href', '#' + $(this).html());
});

LiveQueryプラグインを使用する必要があります。 http://plugins.jquery.com/project/livequery ドキュメントはこちらです http://brandonaaron.net/code/livequery/docs

編集：ライブクエリは、ページが読み込まれてDOMが更新された後でも、一致した要素のバインディングイベントまたは発射のコールバックをバインディングまたは発射することにより、jQueryセレクターのパワーを利用します

 $("#links a").livequery('click',function(event) {
                 $(this).attr('href', $(this).attr('href')+'#work');
          });

$("a[href]").click(function(){
   var href = $(this).attr('href');
   var ind = href.indexOf('#');
   if ( ind != -1 ) {
    var hash = href.substring(ind+1);
    $("div#links li a").each(function() {
     var myHref = $(this).attr('href');
     var myInd = myHref('#');
     if ( myInd != -1 ) {
      myHref = myHref.substring(0, myInd);
     }
     $(this).attr('href', myHref + hash)
    });
   }
  });

Hasgtag、Ajax、HTML History APIを使用した完全なデモについては、このページをご覧ください http://www.amitpatil.me/create-gmail--app-using-html5-history-api-and-hashbang/

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top