1

私はプログラマーではなく、主にデザイナーなので、特定のものを開発する際にいくつかの困難があります。

次のシナリオでディープリンクと asual jquery (または他のより適切なプラグイン) を使用する方法に疑問があります。

nav 構造は次のようになります。

<ul>
<li><a href="/pt/empresa/historia" title="História">História</a></li>
<li><a href="/pt/empresa/historia/missao" title="Missão">Missão</a></li>
<li><a href="/pt/empresa/historia/universo" title="Universo">Universo</a></li>
<li><a href="/pt/empresa/historia/numeros" title="números">números</a></li>
</ul>

そしてdiv

<div id="content-mask">
<div id="content-container">
</div>
</div>

クリックされたリンクのページの content-container のコンテンツを content-container にロードしたい。

4

4 に答える 4

2

load次の方法を使用できます。

サーバーからデータをロードし、返されたHTMLを一致した要素に配置します。

$(document).ready(function(){
    $('ul li a').click(function(e){
       e.preventDefault() // prevents the default action of the click event
       $('.content-container').load(this.href) // loads the content based on the value of href attribute 
       // or $('.content-container').load(this.href + " .content-container") in case that I have misunderstood your question
    })
})

のクラスを持つ要素は1つだけにする必要があることに注意してくださいcontent-container。そうしないと、コンテンツが重複します。

于 2012-08-28T12:18:36.490 に答える
2

id最初にタグを追加しulます:

<ul id="myList">

それから：

$("ul#myList li a").click(function(){
   $.ajax({
      url : $(this).attr("href"),
      success:function(data){
         $("#content-container").html($(data).find("#content-container").html());
      }
   })
  return false;
})
于 2012-08-28T12:18:08.660 に答える
0

次のようなスパンタグの使用を検討しましたか？（必要に応じて、同じ種類のコードでdivタグを使用することもできます。

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
    The values stored were 
    <span></span>
    and
    <span></span>
  </div>
<script>var div = $("div")[0];
    jQuery.data(div, "test", { first: 16, last: "pizza!" });
    $("span:first").text(jQuery.data(div, "test").first);
    $("span:last").text(jQuery.data(div, "test").last);</script>

</body>
</html>
于 2012-08-28T12:19:52.920 に答える
0

編集:

OPが以下のコメントで述べたように：

どうすればディープリンクにできますか? たとえば、アドレスバーに www.site.com/pt/empresa/historia と入力すると、関連付けられたファイルの div にコンテンツが読み込まれますか?

解決：

$("ul li a").click(function(e){           

    // Include your domain address in a URL string with anchor's href
    var url = "http://www.your-website-address.com/" + $(this).attr('href')

    $('#content-container').html("Loading Please Wait");
    $('#content-container').load(url);    
    e.preventDefault();

});

その他の注意事項：

ブラウザーのセキュリティ制限により、ほとんどの "Ajax" 要求は同一オリジン ポリシーの対象となります。要求は、別のドメイン、サブドメイン、またはプロトコルからデータを正常に取得できません。

動くデモ

年：

これを実現するには、 jQuery .load()関数を使用します。

$("ul li a").click(function(e){           
    $('#content-container').html("Loading Please Wait");
    $('#content-container').load(this.href);    
    e.preventDefault(); 
})​;

ワーキングデモ

于 2012-08-28T12:28:15.647 に答える