首先,在這裏將問題仔細的描述一下:一般網頁上都有導航條,導航條裏面某個標籤又有一個列表,如下圖所示:
當進行頁面間的跳轉是,希望直接跳轉到相對於的標籤所對應的內容下面。而且簡介標籤下面對應的標籤也是一個導航條,而且具有tab卡片切換效果,當頁面進行跳轉是直接定位到相應的內容。當點擊了“成員介紹”標籤後,效果如下圖:
會直接定位到“成員介紹”標籤的切換效果下。
下面來說下實現思路:
1.首先,在首頁的導航條中將“簡介”標籤下的下拉框每欄設置一個鏈接
<ul class="dropdown-menu">
<li><a href="introPage.html?type=teamstruct">團隊結構</a></li>
<li class="divider"></li>
<li><a href="introPage.html?type=teamintro">團隊介紹</a></li>
<li class="divider"></li>
<li><a href="introPage.html?type=teamculture">團隊文化</a></li>
<li class="divider"></li>
<li><a href="introPage.html?type=teacherintro">導師介紹</a></li>
<li class="divider"></li>
<li><a href="introPage.html?type=memberintro">成員介紹</a></li>
</ul>
2.第二、在點擊下拉框中的標籤後,頁面就會跳到簡介頁面,那麼我們就在頁面加載的時候獲取點擊的下拉框中的哪一個標籤。這是這個效果最核心的地方。
//獲取地址欄中的地址
var url=window.location.search;
//轉換成字符串
url=url.toString();
var array=new Array();//用來存放分分割後的字符串
array=url.split("=");
3.接下來就是在本頁面的tab導航條中找到與之匹配的標籤,這個就很簡單了
//這裏的titles數組是tab選項卡的的標籤數組,遍歷數組
//找到與之相等的標籤,然後改變其背景顏色
for(var m=0;m<titles.length;m++){
titles[m].id=m;
if(array[1] == titles[m].className){
titles[m].style.backgroundColor="#444444";
//清除其他樣式
for (var j = 0; j < titles.length; j++) {
divs[j].style.display = "none";
}
/* divs數組是tab選項卡對應內容的數組 ,將其內容顯示出來*/
divs[titles[m].id].style.display="block";
}
}
這樣三步,就可以實現了定位。