我們這次用到的是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>