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