实现点击跳转到页面具体模块

我们这次用到的是window.location.hash这个属性，这个属性获取的是#后边的内容，我们可以通过判断跳转页面的#后边内容来选择加载完成后执行的操作。

if (window.location.hash==="#a"){
 //a 显示，其他隐藏
}

例如我们见过的一些网站点开链接之后跳转到具体的选项卡，我及得之前是360网站上边好像就是这样，那我们也试下。

// 外部页面：
<a href="1.html#a">a</a>
<a href="1.html#b">b</a>
<a href="1.html#c">c</a>
<a href="1.html#d">d</a>
<a href="1.html#e">e</a>
跳转后1.html的页面：

<ul class="uls">
    <li id="a" class="uls_li_checked">a</li>
    <li id="b">b</li>
    <li id="c">c</li>
    <li id="d">d</li>
    <li id="e">e</li>
</ul>
<div class="con">
    <div>a的内容</div>
    <div style="display:none;">b的内容</div>
    <div style="display:none;">c的内容</div>
    <div style="display:none;">d的内容</div>
    <div style="display:none;">e的内容</div>
</div>

<script type="test/javascript">
// $(function(){ ··· }) 等于 $(document).ready();
$(function(){
    'use strict';
    
    // 初始化变量
    var useIndex = window.location.hash, // String:'#N',
        $tabNavItem = $('.uls > li'),
        tabNavItemActive = 'uls_li_checked',
        $tabContItem = $('.con').children();;
        
    // 修正参数 - W.L.hash 获取的是 `#string` 的格式，我们只需要 # 后面的内容
    useIndex = useIndex ? parseInt(useIndex.substr(1)) : 0;
    
    // 初始化自动显示
    flip( useIndex );
    
    // 手动切换
    tabNavItem.on('click.app',function(e){
        flip( $(this).index() );
    })
    
    // 切换方法
    function flip(index){
        // 全部移除选中 - 选择当前索引的条目 - 添加选中
        $tabNavItem.removeClass(tabNavItemActive)
        .eq(index)
        .addClass(tabNavItemActive);
        
        // 隐藏已显示条目 - 选择当前索引他条目 - 显示
        $tabContItem.hide()
        .eq(index)
        .show();
    }
    
});
</script>