基于 window.location.hash的异步刷新改变地址栏地址（类似于腾讯那个图片分类切换图片的功能）

实现类似功能

 

 

功能：点击li标签，地址栏改变，背景变红，输入地址。可以直接将某个li直接改变颜色

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
<script type="text/javascript">
    $(function () {
        var str = window.location.href.toString();
        var pos = str.indexOf("#p=");
        var nub = 1;
        if (pos !== -1) {
            nub = str.match(/\#p\=(\d{1,})/i)[1];
           var item = 'ul li:eq(' + (nub-1) + ')';
            $(item).css('background-color', 'red').siblings().css('background-color', 'white');
        }

        $('ul li').click(function () {
            $(this).css('background-color', 'red').siblings().css('background-color', 'white');
            location.hash = "#p=" + parseInt($(this).text());
            var str = window.location.href.toString();
            var pos = str.indexOf("#p=");
            var nub = 1;
            if (pos !== -1) {
                nub = str.match(/\#p\=(\d{1,})/i)[1];
            }
        });
    });
    
</script>