4

私はHTMLとCSSに精通していると言うことから始めましょうが、このjQueryのものは私にとってはちょっと新しいものです。ですから、これは本当に簡単に修正できるかもしれません。私は他の答えを見てきましたが、コツをつかむことができません。

次のように、4つのタブで設定されたjQueryタブテーブルがあります。

<ul class="tabs">
    <li>
        <a rel="tab_1">Education Insurance</a>
    </li>
    <li>
        <a rel="tab_2">Home Insurance</a>
    </li>
    <li>
        <a rel="tab_3">Car Insurance</a>
    </li>
    <li>
        <a rel="tab_4">Business Insurance</a>
    </li>
</ul>

各タブのコンテンツは、次のように、その下の個別のdivタグにあります。

<div class="panes">
    <div id="tab_1" class="tab-content">
        <p>Tab content goes here.</p>
    </div>

私がやろうとしているのは、別のページにあるタブ2またはタブ3に直接リンクできるリンクをホームページに作成することです。誰かがこれを手伝うことができますか？

4

3 に答える 3

4

jQuery UIタブを使用できますが、これは自動的に行われます。

これがワーキングフィドルです

タブリンク

最初のタブ

2番目のタブ

3番目のタブ

参照：JQueryUIタブ

さらに良いことに、ユーザーが次のように自分でURLをコピーできるように、selectのハッシュを変更できます。

$('#tabs').tabs({
    select: function(event, ui) {
        window.location.hash = ui.tab.hash;
    }
});

​
于 2012-05-30T14:59:10.900 に答える
0

すべてのコンテンツdivが表示されており、ユーザーがクリックしたときにその特定のdivまでスクロールする必要があると想定しています。ボタンをスクロールイベントにバインドする必要があります。

 $(document).ready(function() {
 $('button2').click = function (){
 $(document).scrollTo('#tab2');
 } 
 });

 $(document).ready(function() {
 $('button3').click = function (){
 $(document).scrollTo('#tab3');
 } 
 });

次に、IDが「button1」と「button2」の2つのボタンを作成します。例えば。

<div id='button2'>Tab2</div>
or
<a href='#' id='button2'>Tab2</a>

ユーザーがそれらをクリックすると、コンテンツdivに移動します。

于 2012-05-30T14:58:15.020 に答える
0

それはドキュメントにあります:)非常に単純なスニペットです。私はそれを自分で使用しました。

var $tabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});

ページの「読み込み時」に実行したい場合 (つまり、ホームページのリンクで別のタブ付き画面に移動する場合)、ドキュメントの読み込みが解読して .上記のように tabs("select", tabNo) 。繰り返しますが、私はこれを製品コードで行っており、信頼性があります。

于 2012-05-30T14:57:12.113 に答える