jQuery Tabs Script - 关于添加简单内容的问题

时间:2011-09-21 19:34:44

标签: javascript jquery css

我找到了here的jQuery标签脚本。我要做的是在其中一个中添加一个“左”类,在另一个中添加一个“右”类。我这样做是因为左侧和右侧的边界半径不同。

由于这个脚本将我的标签放在一起,我不能只是按照我想要的方式添加它,所以我需要一些帮助。规格应该有一个左类,功能应该有一个正确的类。

如何向变量Tabs添加更多信息,并告诉它使用哪个类?

我的部分代码是:

var Tabs = {
    'Specifications'    : 'test.php?action=specifications',
    'Features'  : 'test.php?action=features',
}

/* Looping through the Tabs object: */
var z=0;
$.each(Tabs,function(i,j){
    /* Sequentially creating the tabs and assigning a color from the array: */
    var tmp = $('<li><a href="#" class="tab">'+i+'</a></li>');

    /* Setting the page data for each hyperlink: */
    tmp.find('a').data('page',j);

    /* Adding the tab to the UL container: */
    $('ul#tab').append(tmp);
})

提前致谢!

2 个答案:

答案 0 :(得分:2)

向初始Tabs对象添加更多数据:

var Tabs = {
    'Specifications':{class:"left",url:'test.php?action=specifications'},
    'Features':{class:"right",url:'test.php?action=features'}
}

/* Looping through the Tabs object: */
var z=0;
$.each(Tabs,function(i,j){
    /* Sequentially creating the tabs and assigning a color from the array: */
    var tmp = $('<li><a href="#" class="tab">'+i+'</a></li>')
        /* Setting the page data for each hyperlink: */
            .find('a')
            .addClass(j.class)
            .data('page',j.url)
            .end()
        /* Adding the tab to the UL container: */
        .appendTo($('ul#tab'));
})

答案 1 :(得分:1)

使用JSON的力量:http://jsfiddle.net/b8Kpg/3/

var Tabs = [
    {'title':'Specifications', 'url': 'test.php?action=specifications', 'class': 'left'}
    {'title':'Features', 'url': 'test.php?action=features', 'class': 'right'}
]

$(Tabs).each(function(){
    /* Sequentially creating the tabs and assigning a color from the array: */
    var tmp = $('<li><a href="#" class="tab">'+this.title+'</a></li>');

    /* Setting the page data for each hyperlink: */
    tmp.find('a').data('page',this.url);

    tmp.addClass(this.class);

    /* Adding the tab to the UL container: */
    $('ul#tab').append(tmp);
})