從另一頁訪問div選項卡

我使用了一些來自twitters bootstrap的代碼，這是一種navbar選項卡。從另一頁訪問div選項卡

這些選項卡似乎是使用#tab功能檢索的。比方說這個菜單上名爲index.php的

<div class="bs-docs-example"> 
    <div class="tabbable tabs-left"> 
     <ul class="nav nav-tabs"> 
     <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> 
     <li><a href="#tab2" data-toggle="tab">Section 2</a></li> 
     <li><a href="#tab3" data-toggle="tab">Section 3</a></li> 
     </ul> 
     <div class="tab-content"> 
     <div class="tab-pane active" id="tab1"> 
      <p>I'm in Section A.</p> 
     </div> 
     <div class="tab-pane" id="tab2"> 
      <p>Howdy, I'm in Section B.</p> 
     </div> 
     <div class="tab-pane" id="tab3"> 
      <p>What up girl, this is Section C.</p> 
     </div> 
     </div> 
    </div> 
    </div>

文件，但如何從像main.php另一個頁面直接跳轉到TAB2？你明白我的意思嗎？我嘗試：

<a href="index.php#tab2">link to tab2</a>

或

<a href="index.php#tab2" data-toggle="tab">link to tab2</a>

，但它不工作...，不若數據切換=「標籤」由於某種原因需要知道嗎？

任何提示讚賞！

來源

2012-10-04 Fredrik Tornell

如果你會使用jquery.tabs（）（在jQuery UI中找到），那麼它的工作原理。 – jtheman

嗯，好的，我該怎麼做？我是一個新手... –

jtheman：我如何能做到這一點的任何提示？我的知識在這方面有點「不存在」！ –

使用jquery easytabs插件解決這個很簡單。閱讀和下載插件：http://os.alfajango.com/easytabs/記住安裝jQuery和其他的Javascript

HTML：

<head> <!-- other markup --> 
    <script src="/javascripts/jquery.js" type="text/javascript"></script> 
    <script src="/javascripts/jquery.hashchange.js" type="text/javascript"></script> 
    <script src="/javascripts/jquery.easytabs.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('#tab-container').easytabs(); 
     }); 
    </script> 
</head> 
<body> 



<div id="tab-container" class="tab-container"> 
<ul class='etabs'> 
    <li class='tab'><a href="#tabs1-html">HTML Markup</a></li> 
    <li class='tab'><a href="#tabs1-js">Required JS</a></li> 
    <li class='tab'><a href="#tabs1-css">Example CSS</a></li> 
</ul> 
<div id="tabs1-html"> 
    <h2>HTML Markup for these tabs</h2> 
    <!-- content --> 
</div> 
<div id="tabs1-js"> 
    <h2>JS for these tabs</h2> 
    <!-- content --> 
</div> 
<div id="tabs1-css"> 
    <h2>CSS Styles for these tabs</h2> 
    <!-- content --> 
</div>

CSS：

.etabs { margin: 0; padding: 0; } 
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; } 
.tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; } 
.tab a:hover { text-decoration: underline; } 
.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; } 
.tab a.active { font-weight: bold; } 
.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }

來源

2012-10-23 19:55:34 jtheman

嗨，thx爲keeiping與我，即時通訊使用bootstrap，該如何標記看起來像？有沒有辦法在bootstrap-tabs.js中找到它？ –

@FredrikTornell Aha，更簡單，那麼你已經實現了jQuery UI選項卡。所以要訪問哈希看到我的其他答案... – jtheman

使用引導程序和所包含的jQuery UI，實現的導航哈希非常簡單。使用這樣的Javascript

$(function() { 
    var gotoTab = $('[href=' + location.hash + ']'); 
    gotoTab && gotoTab.tab('show'); 
});

但是，這不適用於歷史記錄或後退按鈕。所以這是使用javascript進行製表導航的一個缺點。我不知道有沒有其他解決方案？

來源

2012-10-24 15:14:26 jtheman

而這個JavaScript應該放在頭部分？然後我可以使用鏈接來訪問第二頁像index.php #tab2正確嗎？ –

試圖index.php？ID = 38＃add_comment和add_comment是該選項卡的ID我想訪問... dosnt工作，我把你的代碼放在標題 –

@FredrikTornell當然，在頭上或任何地方。你以前加載過標籤代碼嗎？試試$（'＃tab3'）。tab（'show'）;在函數調用，看看這是否得到頁面加載默認？也許你可以將所有的JavaScript代碼也發佈到上面的問題？ – jtheman

從另一頁訪問div選項卡

回答

相關問題