0

看看http://jquerytools.org/demos/tabs/skin1.htm。相当优雅。如何使用 jQuery（不是 jQuery 工具）完成同样的事情？Theme Rooler 对为此创建主题没有帮助，它只能更改颜色，大多数情况下。我不想使用 jQuery 工具，因为我已经使用 jQuery。不想混合到单独的库中。

所以我已经弄脏了 CSS（修改 jQuery 的 css），但我无法得到完全相同的结果。有更简单的解决方案吗？我正在考虑放弃 jQuery 的选项卡并从头开始创建自己的选项卡，但仍然使用一些 jQuery 功能，例如 hide() 或选择器。我知道我的问题很模棱两可，但我只想指出正确的方向。

4

2 回答 2

1

jQuery Tools 是 jQuery 的扩展，与它没有冲突。事实上，如果不首先加载 jQuery，它将无法工作。他们为许多常见的网页元素提供了非常好的库。你自己说它很优雅，为什么不使用它呢？

于 2012-09-18T21:34:14.230 回答
0

请试试这个：http: //jsfiddle.net/wZPzB/

好链接：http: //jqueryui.com/demos/tabs/

不太清楚，你是什么意思不使用脚本下面的 JQ 工具不使用工具库。

希望它符合原因！:)

脚本

  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
  <script type="text/javascript" src="/js/lib/jquery.lint-11-06.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">

代码==>$( "#tabs" ).tabs();

var $tabsList = $( "<ul></ul>" );

$( ".tab h3" )
    .each( function( idx ) {
        var $this = $( this ),
            tabId = "tabs-" + idx;
        
        $tabsList.append( "<li><a href='#" + tabId + "'>" + $this.text() + "</a></li>" );
        
        $this
            .parent()
                .removeClass( "tab" )
                .attr( "id", tabId );
        
        $this.remove();
        
    } );

$tabsList.prependTo( ".tabs" );

$( ".tabs" ).tabs();
​
于 2012-09-18T21:39:02.133 回答