Question

Answer 1

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

应该让你开始朝着正确的方向前进。如果您想使用jQuery UI选项卡，请查看互联网上的百万个示例。但是，您尝试做的事情非常简单，并且可以通过附带的小提琴轻松实现。将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/

Jquery工具选项卡自定义

1 个答案: