1

私は、一種の navbar タブである、twitter のブートストラップからのコードを少し使用しています。

これらのタブは、#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>

しかし、それは機能していません...、 data-toggle="tab" が何らかの形で必要かどうかわかりませんか?

ヒントをいただければ幸いです。

4

2 に答える 2

0

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-23T19:55:34.517 に答える
0

Bootstrap と付属の jQuery UI を使用すると、ナビゲーション ハッシュの実装が非常に簡単になります。このようなJavascriptを使用してください

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

ただし、これは履歴や戻るボタンでは機能しません。したがって、これはタブ ナビゲーションに JavaScript を使用することの欠点です。他に解決策があるかどうかわかりませんか？

于 2012-10-24T15:14:26.687 に答える