a標籤跳轉到另一個頁面的特定選項卡
【點選連結進入另一個頁面的特定選項卡】
為解決這個問題我要做的就是獲取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