如何在单击链接时使URL唯一

Question

i have code like this in a page called list.php when i click a link the video in the iframe was change into the video i selected but in the address bar its still list.php how can i make the url be list.php/Anohana10? or something like that?

<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

You could, instead of intercepting the <a>'s default behaviour of redirecting the page, let it anchor the information, like <a id="Anohana10" href="#Anohana10">, then your page's url would look like: list.php#Anohana10.

The iframe's link information, you can store on another custom attribute (let's say data-url), and retrieve it with your jquery function:

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

EDIT

To get the anchor from the URL when typing it directly, add this to the ready jquery method:

$(document).ready(function(){

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

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

This will get the #id from the url, and perform the click of the corresponding <a> tag, loading the video...