问题描述:

Take a look at http://jquerytools.org/demos/tabs/skin1.htm. Is quite elegant. How can I accomplish the very same thing using jQuery (not jQuery Tools)? Theme Rooler is not helpful for creating a theme for that, it can only change colors, mostly. I don't want to use jQuery Tools because i arleady use jQuery. Don't want to mix to separate libraries.

So i've got my hands dirty of CSS (modifying jQuery's css) but I couldn't get the exact same same result. Any simpler solution? I'm thinking of giving up on jQuery's tabs and creating my own tabs from scratch, but still using some of jQuery functionalities like hide() or selectors.

I know my question is quite ambiguous but I only want to be pointed in the right direction.

网友答案:

jQuery Tools is an extension of jQuery, not something that conflicts with it. IN fact it will not work without jQuery being loaded first. They have very good libraries for a number of common web page elements. You yourself said is was quite elegant, so why not use it?

网友答案:

Try this please: http://jsfiddle.net/wZPzB/

Good link: http://jqueryui.com/demos/tabs/

Not quite sure about, how do you mean not using JQ tool below script not using tool lib.

Hope it fits the cause! :)

Scripts

  <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">

code ==> $( "#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();
​
相关阅读:
Top