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>

ETC

我如何在 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>

和 Javascript

$(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 回答