Question

我一直在尝试在我的网站上创建一些标签，在这里：

<ul class="tabContainer">
       <!--Tabs Here -->
    </ul>

    <div class="clear"></div>

    <div id="tabContent">
        <div id="contentHolder">
            <!-- The content goes here -->
        </div>
    </div>

现在，我已经看到使用了以下内容，但我想知道是否有可能而不是单独的内容页面来代替个人div：

所以代替：

var Tabs = {
    'Music' : 'pages/page1.html',
    'DVD' : 'pages/page2.html'.
}

改为使用：

var Tabs = {
    'Music' : 'div#fragment-1',
    'DVD' : 'div#fragment-2'.
}

这可能吗？或者是否有其他解决方案我可以用来以某种方式获取内容？我只想要一个简单的解决方案，我可以在两个内容选项卡之间切换，但仅用于JQuery 1.4？

希望你能提供帮助，

Snakespan

Answer 1

您可以尝试以下内容：

JS

$(function(){

function contentSwitcher(settings){
    var settings = {
       contentClass : '.content',
       navigationId : '#navigation'
    };

    //Hide all of the content except the first one on the nav
    $(settings.contentClass).not(':first').hide();
    $(settings.navigationId).find('li:first').addClass('active');

    //onClick set the active state, 
    //hide the content panels and show the correct one
    $(settings.navigationId).find('a').click(function(e){
        var contentToShow = $(this).attr('href');
        contentToShow = $(contentToShow);

        //dissable normal link behaviour
        e.preventDefault();

        //set the proper active class for active state css
        $(settings.navigationId).find('li').removeClass('active');
        $(this).parent('li').addClass('active');

        //hide the old content and show the new
        $(settings.contentClass).hide();
        contentToShow.show();
    });
}
contentSwitcher();
});

HTML

<div id="navigation">
  <ul class="tabbedContent">
<li><a href="#page1">link 1</a></li>
    <li><a href="#page2">link 2</a></li>
<li><a href="#page3">link 3</a></li>
<li><a href="#page4">link 4</a></li>    
    <li><a href="#page5">link 5</a></li>                                
   </ul>
</div>

<div id="page1" class="content">

</div>               
<div id="page2" class="content">

</div>               
<div id="page3" class="content">

    </div>

<div id="page4" class="content">

</div>
<div id="page5" class="content">

</div>
</div>

Answer 2

将 script.js - 第2部分的代码从第31行替换为第43行，代码如下：

if(!element.data('cache'))
{
    var msg - $(element.data('page')).html()
    $('#contentHolder').html(msg);
    element.data('cache',msg);
}
else $('#contentHolder').html(element.data('cache'));

旁注...如果在现有代码中包含jQuery UI并不是什么大问题，为什么不使用jQuery UI提供的选项卡。

JQuery Tabs内容帮助 - 1.4

2 个答案: