0

タブのセットがあり、選択リストは垂直に積み上げられ、選択されたアイテムには「選択済み」クラスがあります。

タブのヘッダーとしても機能できるように、その項目をリストの最後の項目にする必要があります。

このように表示されます。

<ul class= 'tabSelect'>
 <li>item 1</li>
 <li>item 3</li>
 <li>item 4</li>
 <li class="selected">item 2</li>
</ul>
<div id="tab1" style="display:none">
<div id="tab2">
 item 2 content....
</div>

等

jqueryでこれを行うにはどうすればよいですか

ページはwww.businessexcellencebristol.co.uk/category/membersです。

ああ、ありがとう！

4

3 に答える 3

1

アイテムを再配置する必要がある場合は、リストからアイテムを削除してから、リストに追加し直します。

var $selected = $('.selected');
var $parent = $selected.parent();
$selected.remove();
$selected.appendTo($parent);
于 2013-01-23T20:04:21.957 に答える
0

これは、jQuery では実際には非常に簡単です。コードは次のようになります。

$('#move').click(function() {
    $('.tabSelect .selected').appendTo('.tabSelect');
});

コードはクリック ハンドラー内に配置され、簡単にトリガーできるようになっていますが、ロード時や任意のイベントで実行することもできます。ここでコードの動作を確認できます: http://jsfiddle.net/qK9XL/

アイテムをその親に追加すると、実際には子のリストの一番下に移動します。Prepend も同じことを行いますが、先頭に移動します。これは、アイテムをその親に追加するときにのみ機能することに注意してください。別の要素に追加する場合は、移動するのではなく、そこにコピーして最後の子として追加します。

于 2013-01-23T20:05:23.750 に答える
0

私は次のようにします：

スタイル

<style type="text/css">
    .tabContent { display: none }
</style>

次のように表示されるようにhtmlを再配置します

<ul class='tabSelect'>
    <li id='title-1'>item 1</li>
    <li id='title-2' class="selected">item 2</li>
    <li id='title-3'>item 3</li>
    <li id='title-4'>item 4</li>
</ul>
<div id="tab-1" class="tabContent">
    Item 1 content
</div>
<div id="tab-2" class="tabContent">
    Item 2 content
</div>

そしてジャバスクリプト

$(document).ready( function() { // Or maybe within a select change $('#contentSelect').change();
    showSelected();
});


function showSelected() {
    // Puts the title li last
    var $ul = $('ul .selected');
    $('ul').append($ul);
    // Makes the corresponding content visible
    $('.tabContent).hide();
    $('#tab-' + $ul.prop('id').split('-')[1].show();
}
于 2013-01-23T20:26:14.187 に答える