0

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

<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'.
}

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

希望你能帮忙，

蛇盘

4

2 回答 2

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>
于 2012-07-03T15:50:14.390 回答
0

将script.js – Part 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 提供的选项卡。

于 2012-07-03T15:57:07.323 回答