1

我想做同样的事情。

我们可以通过 jquery (http://flowplayer.org/tools/demos/tabs/skins.html) 轻松地制作标签，但我不知道如何在标签内容位置显示默认内容。请看图像它将显示我的内容正是想要。

请任何人帮助并给出想法。

4

1 回答 1

1

我在这里创建了一个小提琴：http : //jsfiddle.net/garreh/cfmvE/

应该让您朝着正确的方向开始。如果您想使用 jQuery UI 选项卡，请查看 Internet 上的数百万个示例。但是，您尝试做的事情非常简单，可以使用随附的小提琴轻松实现。将 ajax 添加到代码中非常容易。

<div id="tab_container">
    <div class="tab_content tab_1 tab_active">
        What's your name?<br/><br/>
        <input type="text"/>
    </div>
    <div class="tab_content tab_2">
        Some other question
    </div>
    <div class="tab_content tab_3">
        A final question blah
    </div>        
</div>

<div id="tabs">
    <a href="#" tab="1">Question 1</a>
    <a href="#" tab="2">Question 2</a>
    <a href="#" tab="3">Question 3</a>
</div>

jQuery：

$('#tabs > a').click(function() {
    var $tab = $('.tab_' + $(this).attr('tab'));
    if ($tab.length)
    {
        // Hide active tab & selected style:
        $('.tab_active').removeClass('tab_active');
        $('#tabs .active').removeClass('active');

        // Show clicked tab content
        $tab.addClass('tab_active');

        // Set tab styling
        $(this).addClass('active');
    }
});

小提琴上可用的 CSS。

编辑：

这是另一个使用超链接锚技巧仅使用 HTML 演示选项卡的小提琴。不需要 Javascript：http: //jsfiddle.net/garreh/6e2w5/

于 2011-04-18T13:47:52.657 回答