Question

我不是程序员，我主要是设计师，所以在开发某些东西方面遇到了一些困难。

我对如何在以下场景中使用深层链接和asual jquery（或其他更适合的插件）有疑问。

导航结构更像或更像：

<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>

我想在内容容器中加载点击链接页面中内容容器的内容。

Answer 1

首先将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;
})

Answer 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
    })
})

load()

_{请注意，您应该只有一个类别为content-container的元素，否则您的内容会重复。}

Answer 3

您是否考虑过像这样使用span标签:(如果需要，也可以使用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>

Answer 4

编辑：

正如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”请求都遵循相同的原始策略;请求无法成功从其他域，子域或协议中检索数据。

A WORKING DEMO

<强> OLD：

使用jQuery .load()函数来实现此目的。

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

WORKING DEMO

使用通常的jquery和deeplinking将内容加载到div中

4 个答案:

A WORKING DEMO