實現點擊跳轉到頁面具體模塊

我們這次用到的是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>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容