单击链接时如何使网址唯一

Question

当我单击链接时，我在名为list.php的页面中有这样的代码，将iframe中的视频更改为我选择的视频，但在地址栏中仍是list.php，如何使url为list.php / Anohana10？ 或类似的东西？

<script>
    $(document).ready(function(){
    $("ul#videos li a").click(function(e) {
        e.preventDefault();

        $("#video").attr("src", $(this).attr("href"));
    })
});
</script>

<div class="videoWrapper">
    <IFRAME  id="video" SRC="http://upload4free.co/embed-trdcgvsgf0tj-500x300.html" FRAMEBORDER=0  
        webkitAllowFullScreen ></IFRAME>
    </div>

<ul id="videos">
    <li><a id="Anohana10" href="http://upload4free.co/embed-ndi71khpdvbf-580x300.html">Anohana Episode 10</a></li>
    <li><a id="Anohana9" href="http://upload4free.co/embed-flm2y2648udr-580x300.html">Anohana Episode 9</a></li>

Answer 1

您可以让其锚定信息，而不是拦截<a>重定向页面的默认行为，例如<a id="Anohana10" href="#Anohana10"> ，然后页面的url应类似于： list.php#Anohana10 。

iframe的链接信息，您可以存储在另一个自定义属性（比如data-url ）上，并使用jquery函数进行检索：

<script>
    $(document).ready(function(){
    $("ul#videos li a").click(function(e) {
        $("#video").attr("src", $(this).attr("data-url"));
    })
});
</script>

<div class="videoWrapper">
    <IFRAME  id="video" SRC="http://upload4free.co/embed-trdcgvsgf0tj-500x300.html" FRAMEBORDER=0  
        webkitAllowFullScreen ></IFRAME>
    </div>

<ul id="videos">
    <li><a id="Anohana10" href="#Anohana10" data-url="http://upload4free.co/embed-ndi71khpdvbf-580x300.html">Anohana Episode 10</a></li>
    <li><a id="Anohana9" href="#Anohana9" data-url="http://upload4free.co/embed-flm2y2648udr-580x300.html">Anohana Episode 9</a></li>

编辑

要在直接键入URL时从URL获得锚，请将其添加到ready jquery方法中：

$(document).ready(function(){

    var identifier = window.location.hash;
    if(identifier != "")
        $(identifier).click();

    $("ul#videos li a").click(function(e) {
    ...
});

这将从网址中获取#id ，然后点击相应的<a>标签，然后加载视频...