CODEWITHSUNDEEP
javascriptjquery
user967211
user967211

Reputation: 69

Using JavaScript to switch through tabs without changing layout?

My webpage is at http://sarahjanetrading.com/js/j/index.html

I have done all the layout and coding. I want the tabs to toggle when clicked over them. I tried google but was in vain. I am willing to achieve the effect using either JavaScript or jQuery. My tabs are empty right now, And I want the layout to remain the same.

NEW :

This is my code so far: 

<script type="text/javascript">
var lis = $('#main-tabs li');
  lis.click( function() {
  //Reset all the tabs
  lis.removeClass('active-tab').addClass('inactive-tab');
  $(this).addClass('active-tab');
   });

 </script> 

<script type="text/javascript">
$(document).ready(function() {

 $(".tab-content").hide();
 $("ul#main-tabs li a:first").addClass("active").show();
 $("#wrap > div").hide().filter(":first").show();

 $("ul.tabs li a").click(function() {
    $("ul.tabs li > a").removeClass("active");
    $(this).addClass("active");
    $("#wrap > div").hide();
    var activeTab = $(this).attr("href");
    $(activeTab).show();
    return false;
  });

});

</script>

For the full HTML and JavaSript code (new) please go to http://sarahjanetrading.com/js/j/index.html

What it does is that when I click on a list item, it changes the tab, but not the content. And when I click on the anchor of a list item, it changes the content, but not the tab. I want both the content and the tab to change consistently.

Thanks

Upvotes: 0

Views: 467

Answers (2)

Davide
Davide

Reputation: 2339

This quick test is working pretty well

var lis = $('#main-tabs li');
lis.click( function() {
  //Reset all the tabs
  lis.removeClass('active-tab').addClass('inactive-tab');
  $(this).addClass('active-tab');
});

Of course it doesn't consider the content of the tabs, but it's a start :)

Upvotes: 0

Farhan Ahmad
Farhan Ahmad

Reputation: 5198

jQuery UI is probably the best solution. You can use the .tabs() to accomplish what you are trying to do. You can also edit the layout easily by using ThemeRoller.

Upvotes: 1

Related Questions