2

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

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

たとえば、「仕事」をクリックすると、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 を追加し、クリックしたときにハッシュタグが追加されるようにする必要があります。

これは可能ですか？これは理にかなっていますか？

4

8 に答える 8

4

リンクのプロパティを使用hashして、残りの部分をいじらずにフラグメント識別子を設定しますhref。

$('#links a').each(function() {
    this.hash= location.hash;
});​​​​​​​
于 2010-10-07T19:18:21.810 に答える
2

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

$("div#links li a").each(
  function(index, element){
     $(this).attr('href',$(this).attr('href') + window.location.hash)
  });
于 2010-10-07T19:08:19.233 に答える
2

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>
于 2010-10-07T19:09:16.627 に答える
1

これを試して：

$(function() {
    $('#links a').each(function() {
        $(this).attr('href', $(this).attr('href')+'#work');
    });​​​​​​​
});
于 2010-10-07T19:05:46.837 に答える
0 
$('#links li a').each(function()
{
    $(this).attr('href', '#' + $(this).html());
});
于 2010-10-07T19:05:48.437 に答える
0

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

編集: Live Query は、ページが読み込まれて DOM が更新された後でも、イベントをバインドするか、一致した要素のコールバックを自動的に起動することにより、jQuery セレクターの機能を利用します。

 $("#links a").livequery('click',function(event) {
                 $(this).attr('href', $(this).attr('href')+'#work');
          });
于 2010-10-07T19:16:48.583 に答える
0 
$("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)
    });
   }
  });
于 2010-10-07T19:20:41.387 に答える
0

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

于 2012-02-14T06:44:54.243 に答える