2

この質問のバージョンが尋ねられたのを見たことがありますが、jquery ui 1.10.2 の一部ではない古いバージョンの jquery またはタブについて尋ねられました

私の質問は:
a) アクティブなタブのセレクターが URL に追加されるように、これにどの jquery コードを追加する必要があります
か (たとえば、tabs-6 がクリックされたアクティブなタブの場合、ブラウザーに表示される URL は page2 です) .html#tabs-6)
b) URL に基づいてアクティブなタブを変更するリンクを作成できます (そのため、「page1.html」に「page2.html#tabs-3」を指すリンクを作成した場合) #tabs-3」がアクティブタブになる？

Web サイトのいくつかのページを jquery ui タブに統合し (themerolled jquery UI 1.10 を使用)、ホームページのメニューから個々のタブにリンクできるようにする必要があります。私は html/css の経験が豊富ですが、私の jquery の知識は、基本的にデモの例を実装および編集できる程度に限られています。

私たちの目的のために、コードのタブ チャンクは、基本的にタブ デモからストック jquery ui です。

<head>
<script>
$(function() {

    $( "#tabs" ).tabs();

    // Hover states on the static widgets
    $( "#dialog-link, #icons li" ).hover(
        function() {
            $( this ).addClass( "ui-state-hover" );
        },
        function() {
            $( this ).removeClass( "ui-state-hover" );
        }
    );
});
</script>
</head>
<body>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab One</a></li>
    <li><a href="#tabs-2">Tab Two</a></li>
    <li><a href="#tabs-3">Tab Three</a></li>
    <li><a href="#tabs-4">Tab Four</a></li>
    <li><a href="#tabs-5">Tab Five</a></li>
    <li><a href="#tabs-6">Tab Six</a></li>
  </ul>
</div>
<div id="tabs-1">
  <p>tab 1 content</p>
</div>
<div id="tabs-2">
  <p>tab 2 content</p>
</div>
<div id="tabs-3">
  <p>tab 3 content</p>
</div>
<div id="tabs-4">
  <p>tab 4 content</p>
</div>
<div id="tabs-5">
  <p>tab 5 content</p>
</div>
<div id="tabs-6">
  <p>tab 6 content</p>
</div>
</body>
4

1 に答える 1

-1

(a) については、「select」イベントにカスタム コードを記述する必要があると思います。

(b) の場合 -- インバウンドリンクは正常に動作するはずです。タブの div ID をフラグメントとして使用するだけです (ただし、URI ハッシュを使用してタブを識別する場合のスクロールの防止には注意してください) 。

于 2013-05-02T14:54:51.490 に答える