Question

When I click on ASUS Products page’s Intel socket bla2.., the page doesn’t have to reload, after I clicked for example Intel Socket 2011, Intel C602 & Intel X79 showed up, how do I achieve it using jQuery?

Answer 1

Indeed this is very simple.

First you can try it in seconds with jQuery UI Tabs Widget. This is not the same styling but the idea is the same.

Then you have two options :

• You can try to style the jQuery UI tabs widget : jquery ui just setup the DOM elements with some CSS classes : if you redefine this classes, you can style it your way

• You can reproduce the behaviour without the widget. Basically, set up the same markup than with the widget, hide your tabs with CSS, and reshow them on click on your links. An quick and dirty example :

  $('ul#links li a').click(function(){
    $($(this).attr('href')).show().siblings().hide();
  });
  

Edit

Maybe an easier way to style it : http://os.alfajango.com/easytabs/