js选项卡表

时间:2011-04-28 14:50:30

标签: javascript html-table tabs

我有js和html代码,但这不起作用。 如何让它工作?

<script src="js/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () {
    var tabContainers = $('div.tabs > div');
    tabContainers.hide().filter(':first').show();

    $('div.tabs div.tabs-nav a').click(function () {
        tabContainers.hide();
        tabContainers.filter(this.hash).show();
        $('div.tabs div.tabs-nav a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    }).filter(':first').click();
});
</script>

<div class="tabs">
    <div class="tabs-nav">
        <table width="100%">
            <tr>
                <td><a href="#" href="#tab-1">link-1</a></td>
                <td><a href="#" href="#tab-2">link-2</a></td>
                <td><a href="#" href="#tab-3">link-3</a></td>
                <td><a href="#" href="#tab-4">link-4</a></td>
                <td><a href="#" href="#tab-5">link-5</a></td>
                <td><a href="#" href="#tab-6">link-6</a></td>
            </tr>
        </table>
    </div>
    <div id="tab-1">
        <p>text text text</p>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

听起来您正试图在页面中添加标签页。只需使用jQuery UI和tabs模块。这是工作示例,只需查看源代码并将其复制出来:

http://jqueryui.com/demos/tabs/

您可以使用jQuery UI主题设置样式:

http://jqueryui.com/themeroller/

享受:)