1

私は確かにjQueryを学んでいます。私はこれを検索しようとしましたが、可能な研究手段を使い果たした後、問題を悪化させているのではないかと心配しています.

単純に、タブに jQuery を使用しようとしています。各タブが選択されたときに、各タブのテキスト ラベルを変更したいと考えています。折りたたむか、別のタブを選択すると、元のフォームに戻ります。

JSFiddleに見られるように、ラベルを新しいIDに変更できましたが、実際にはラベルを実際のID名に変更します。

<div id="tabs">
<ul>
    <li><a href="#tab1" id="tab1-label-link">
        <span id="tab1-label">Label 1</span></a>
        <span id="close-tab1-label" class="no-display">Tab Close</span>
    </li>
    <li><a href="#tab2" id="tab2-label-link">
        <span id="tab2-label">Label 2</span></a>
        <span id="close-tab2-label" class="no-display">Tab Close</span>
    </li>
    <li><a href="#tab3" id="tab3-label-link">
        <span id="tab3-label">Label 3</span></a>
        <span id="close-tab3-label" class="no-display">Tab Close</span>
    </li>
</ul>
<div id="tab1" class="tab-content">Information 1</div>
<div id="tab2" class="tab-content">Information 2</div>
<div id="tab3" class="tab-content">Information 3</div>

これが私の現在のjQueryです。

$(document).ready(function () {
    $(function () {
        $("#tabs").tabs({
            option: "selected",
            heightStyle: "content",
            collapsible: true,
            active: 'none',
            fx: {
                height: 'toggle',
                duration: 500
            },
            select: function (e, ui) {
                $(ui.tab).html("#close-" + event.target.id);
            }
        });
    });
});

すべてのヘルプは非常に高く評価されています。私は自分よりもはるかに多くのクラスを使用する必要があると感じています。これは私の問題の 1 つにすぎない可能性があります。ラベルを交換するために非常に多くの異なる方法を試しましたが、これは私が目指しているものに最も近いと感じています. もう一度、助けてくれてありがとう。

.no-display { display: none; }
4

1 に答える 1

1

$(ui.tab).html("#close-" + event.target.id);コードが何をしているかを少し見逃していると思います。つまり、jQuery に「ui.tab の内容を文字列にする」ように指示しています。"#close-" + event.target.id

生活をできるだけシンプルにするために、次のように「閉じる」スパンをタブリンク内に移動することをお勧めします。

<div id="tabs">
    <ul>
        <li><a href="#tab1" id="tab1-label-link">
            <span id="tab1-label">Label 1</span>
            <span id="close-tab1-label" class="no-display">Tab Close</span></a>
        </li>
        <li><a href="#tab2" id="tab2-label-link">
            <span id="tab2-label">Label 2</span>
            <span id="close-tab2-label" class="no-display">Tab Close</span></a>
        </li>
        <li><a href="#tab3" id="tab3-label-link">
            <span id="tab3-label">Label 3</span>
            <span id="close-tab3-label" class="no-display">Tab Close</span></a>
        </li>
    </ul>
    <div id="tab1" class="tab-content">Information 1</div>
    <div id="tab2" class="tab-content">Information 2</div>
    <div id="tab3" class="tab-content">Information 3</div>
</div>

次に、次のようselectに、関数を関数に交換します。beforeActivate

beforeActivate: function(e, ui) {
    var tab = $(ui.newTab),
        oldTab = $(ui.oldTab);
    tab.find('span').toggleClass('no-display');
    oldTab.find('span').toggleClass('no-display');
}

それは望ましい結果を達成するはずです。

于 2013-04-10T01:15:56.590 に答える