Home/ Questions/Q 122377
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T04:07:08+00:00

So I am pretty new to JQuery and just spent 5 hours getting this

  • 0

So I am pretty new to JQuery and just spent 5 hours getting this working. If anyone has a better approach please I would love to hear.

That is my basic question how can it be done cleaner, more streamline?

What I did was used the minitabs plugin and what the code below will do is toggle custom tabs back and forth. I needed a way to have the one tab blue and the other gray depending what tab I was on. What I hit against was tab1 would stay blue even when I clicked on tab2, just was funky until this fixed it. As you can see it’s not the cleanest approach but it works. I am sure if you want to try this out the minitab plugin can be had here.

http://minitabs.googlecode.com/files/jquery.minitabs.js

JQuery:

$(document).ready(function(){     $('#tabs').minitabs('slow', 'fade');          $('#tab1').click(function()             {                 var $this = $(this);                 if( $this.is('.removed') )                       {                        $this.removeClass('removed');                        $this.addClass('selected');                        $('#tab2').removeClass('selected');                        $('#tab2').addClass('removed');                 } else {                        $('#tab2').removeClass('selected');              }     return false;         });         $('#tab2').click(function()             {                 var $this = $(this);                 if( $this.is('.removed') )                    {                         $this.removeClass('removed');                         $this.addClass('selected');                        $('#tab1').removeClass('selected');                        $('#tab1').addClass('removed');                 } else {                        $('#tab1').removeClass('selected');                }                 return false;         });    });

Body:

<div id='tabs'>            <ul>             <li><a href='#quick-links' class='tab-l selected' id='tab1'>tab-l</a></li>             <li><a href='#newsletter-link' class='tab-r removed' id='tab2'>tab-r</a></li>         </ul>          <div id='quick-links'> <ul>   <li>Look at me getting myself all in a frenzy!</li>                </ul>         </div>          <div id='newsletter-link'>   Sometimes it's would be nice if they reported the fun news!         </div>     </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. I looked at this briefly, and didn’t see any problems with this less-complex setup which takes advantage of minitabs automatically applying the class ‘current’ to the currently selected tab:

    <head>     <style type='text/css'>     .tabs a {         background: grey;     }     .tabs a.current {         background: blue;     }     </style>     <script type='text/javascript'>     $(document).ready(function(){         $('#tabs').minitabs('slow', 'fade');     });     </script> </head> <body>     <div id='tabs'>         <ul class='tabs'>             <li><a href='#quick-links' class='tab-l current' id='tab1'>tab-l</a></li>             <li><a href='#newsletter-link' class='tab-r' id='tab2'>tab-r</a></li>         </ul>          <div id='quick-links'>             <ul>                 <li>Look at me getting myself all in a frenzy!</li>             </ul>         </div>          <div id='newsletter-link'>             Sometimes it's would be nice if they reported the fun news!         </div>     </div> </body>

    For me that handles the case you describe perfectly.

    • 0