a標籤跳轉到另一個頁面的特定選項卡

阿新 • • 發佈：2019-01-15

【點選連結進入另一個頁面的特定選項卡】

為解決這個問題我要做的就是獲取URL的hash值，通過這個hash值來決定顯示選項卡的哪個選項。

首先，就是要了解JavaScript的location物件（w3cschool有詳細介紹）。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="./tab.html#home">選項一</a>
	<br>
	<a href="./tab.html#profile">選項二</a>
	<br>
	<a href="./tab.html#messages">選項三</a>
	<br>
	<a href="./tab.html#settings">選項四</a>
</body>
</html>

上面是頁面跳轉連結，可以看到herf屬性裡面跟了hash值。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<!-- 新 Bootstrap 核心 CSS 檔案 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可選的Bootstrap主題檔案（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!-- jQuery檔案。務必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
		<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation" name="profile2"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">.1</div>
  <div role="tabpanel" class="tab-pane" id="profile">..2</div>
  <div role="tabpanel" class="tab-pane" id="messages">.3.</div>
  <div role="tabpanel" class="tab-pane" id="settings">.4.</div>
</div>
<script type="text/javascript">
	var hash = location.hash;//獲取到跳轉頁面的引數
	var tab = $('.nav-tabs li');
	var con = $('.tab-content .tab-pane');
	console.log(con);
	for(var i=0;i<con.length;i++){
		var mm = con[i];
		var selectCon = "#"+ $(mm).attr('id');
		if(hash == selectCon){
			tab.siblings().removeClass('active');
			con.siblings().removeClass('active');
			$(tab[i]).addClass('active');
			$(con[i]).addClass('active');
		}
	}
	
</script>	
</body>
</html>

點選連結跳轉過來的頁面。

獲取到hash值然後和tab的ID比較，相同的選項卡顯示。

第一次寫，不清楚怎樣才能闡述清楚。有問題請指正。

微信小程式--實現按鈕跳轉另一個頁面

首先建立一個按鈕在 index.wxml頁面中建立一個容器作為按鈕 <view class='day-weather' bindtap='onTapDayWeather'> </

在一個頁面點選連結跳轉至另一個頁面的選項卡tab中

頁面A <body> <a href="選項卡-練習.html?type=1">1111111111</a> <a href="選項卡-練習.html?type=2">2222222222</a>

a標籤跳轉到另一個頁面的特定選項卡

【點選連結進入另一個頁面的特定選項卡】為解決這個問題我要做的就是獲取URL的hash值，通過這個hash值來決定顯示選項卡的哪個選項。首先，就是要了解JavaScript的location物件（w3cschool有詳細介紹）。 <!DOCTYPE html&

頁面a跳到另一個頁面b,js實現頁面跳轉傳值

要實現從一個頁面A跳到另一個頁面B，js實現就在A的js程式碼加跳轉程式碼 JS跳轉大概有以下幾種方式：第一種：(跳轉到b.html)<script language="javascript" type="text/javascript">window.l

js實現頁面跳轉，頁面A跳到另一個頁面B，以及頁面傳值

第一個頁面：（tes1.html） <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>頁面1</title>

a標籤跳轉錨點到頁面指定位置

程式碼如下： JS方式: <!DOCTYPE html> <html> <head> <meta charset="utf-8">

最簡單的錨點定位點選a標籤跳轉到頁面指定位置

<div id="aaa"> <p>錨點定位的id和我不一樣</p> </div> <div id="bbb"> <p>錨

a標籤跳轉到配置有angular路由的頁面，並控制顯示view中的內容

今天，工作上遇到一個問題，問題描述：一個頁面（取名：頁面1），這個頁面有三個tab切換，這三個tab切換的內容要用angularjs的路由來配置，點選tab後可以切換內容。在其它地方，有三個連線，都可以連線到這個頁面（頁面1），只是連線到頁面1後顯示的tab內容不同，這個

微信小程序中跳轉另一個小程序

微信 open mini ucc ces java auth ESS min wx.navigateToMiniProgram({ appId: ‘xxxxxxxxxxxxxxxxxx‘, // 要跳轉的小程序的appid path: ‘page/

多個頁面跳轉到一個頁面，每次跳轉顯示不一樣的內容，相同功能形式不同的jsp頁面整合成一個根據傳遞的引數值來決定跳轉的jsp頁面該顯示什麼樣的內容，避免new多個jsp頁面，節省資源

在jsp開發過程中，會遇到這樣的情況；一個頁面跳轉到另一個頁面，需要兩個jsp頁面；如果有5、6種不同的一個頁面跳轉到另一個不同的jsp頁面的時候，基本的功能都差不多，類似的情況，如果建立很多的jsp，會導致資源浪費，還有就是建立多個jsp頁面到後來自己都有點暈；那麼只需要在傳遞的

android fragment跳轉另一個activity出錯

最近遇到了一個麻煩，就是我用fragment為模板寫了一個小的程式，其中包括在fragment中點選跳轉到另一個activity中，但是當我建立一個activity時，程式就炸了。這個錯誤一直困擾了我幾天，各種百度都沒有找出原因，最後我從最基礎的fragment模板開始，建activity測試

前端超級好用a標籤跳轉帶錨點效果

<div class="nav"> <ul> <li><a href="1.html" class="hover"> 首頁</a></li> &

android 使用startActivity（）從一個fragment 跳轉另一個activity出錯

系統沒有崩潰，run裡也沒有明顯的錯誤，但是event Log裡提示跳轉失敗： 20:14:44 error: cannot connect to daemon 20:14:44 'E:\sdk\platform-tools\adb.exe,start-server' failed --

activity跳轉另一個activity時，當前activity銷燬的原因探究

在改寫別人demo的時候發現內部有一個progressdialog，然而在我刪除這個progressdialog後發現跳轉到下一個activity的時候當前activity會銷燬（其實是崩潰了），但是加上對progre

一個頁面跳轉到另一個頁面的導航的對應的標籤下面

首先，在這裡將問題仔細的描述一下：一般網頁上都有導航條，導航條裡面某個標籤又有一個列表，如下圖所示：當進行頁面間的跳轉是，希望直接跳轉到相對於的標籤所對應的內容下面。而且簡介

vue從一個頁面跳轉到另一個頁面並攜帶引數

1.需求：點選商場跳轉到商業體列表解決方案：元頁面： a標籤中新增跳轉函式 <a class="orderBtn1 sIRicon2" href="javascript:void(0);" @click="toMal

js設定定時從一個頁面跳轉到另一個頁面

主要實現點選連結進入視訊介紹，設定定時，然後跳轉到另一個頁面程式碼如下： <script type="text/javascript"> function jumpurl(){ location='http://localhost:8080/Socket/fir

從一個頁面跳轉到另一個頁面的任何位置處

本文轉自http://senir.blog.163.com/blog/static/10411818320131124250259/ 首先在A頁面建立一個錨點 <body><ahref="b.html#pos"target="_blank">

HTML一個頁面輸入值跳轉到另一個頁面並且顯示出來

<spanstyle="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">test1.html</span><spanstyle="

js點選button跳轉到另一個頁面

點選按鈕怎麼跳轉到另外一個頁面呢？我們在網站製作中可能是需要的，因為有時我們需要做這樣的效果，尤其是將按鈕做成一個圖片，而點選圖片要跳轉到新的頁面時，怎麼做到呢？這樣的效果可以：onclick="window.location='新頁面'" 來實現。 1.在原來的窗體中直接跳轉用程式碼如下 window

a標籤跳轉到另一個頁面的特定選項卡

相關推薦