Skip to main content
Code Review

Return to Question

deleted 282 characters in body; edited tags; edited title
Source Link
Jamal
Jamal
  • 34.9k
  • 13
  • 133
  • 237

Possibly optimize my Jquery code? Creating a tab plugin

I am creating a tab plugin. I want to knowknow if there is a better way of doing this or if what I have is good. It works just fine, but there may be some shortcuts or a more optimized way of accomplishing this. I plan to replace the startTabstartTab variable with an options set, but I am not quite there yet. Thanks!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul.tabNavigation {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.tabNavigation li {
    display: inline;
}
ul.tabNavigation li a {
    text-decoration: none;
    color:#000;
}
.tabViews {
    width: 100%;
    border: #8db2e3 solid 1px;
    clear:both;
    height:18px;
    margin-top: -12px;
    background: url(css/tabs/images/tabs_Lower_Header_Background.png) repeat-x;
}
.tab {
    height: 25px;
    font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size:14px;
    float:left;
    padding-left: 4px;
    position: relative;
    top: 1px
}
.tab .right {
    float:left;
    background:url(css/tabs/images/tab_Selected_Right.png) no-repeat;
    height:25px;
    width: 8px;
}
.tab .content {
    float:left;
    background:url(css/tabs/images/tab_Selected_Content.png) repeat-x;
    height:25px;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 4px;
}
.tab .left {
    float:left;
    background:url(css/tabs/images/tab_Selected_Left.png) no-repeat;
    height:25px;
    width: 6px;
}
.tabHover {
    height: 25px;
    font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size:14px;
    float:left;
    padding-left: 4px;
    position: relative;
    top: 1px;
    cursor: pointer;
}
.h1 {
    float:left;
    height:25px;
    width: 14px;
}
.h2 {
    float:left;
    height:25px;
    text-align: center;
    padding-left: 7px;
    padding-right: 5px;
    padding-top: 4px;
}
.h3 {
    float:left;
    height:25px;
    width: 10px;
}
.tabHover:hover .h1 {
    background:url(css/tabs/images/tab_Hover_Right.png) no-repeat;
}
.tabHover:hover .h2 {
    background:url(css/tabs/images/tab_Hover_Content.png) repeat-x;
}
.tabHover:hover .h3 {
    background:url(css/tabs/images/tab_Hover_Left.png) no-repeat;
}
</style>
<script type="text/javascript" src="javascript/jquery/jquery.js"></script>
<script>

$.fn.tabs = function(startTab){
    //Set currentIndex
    var currentIndex = 0;
    
    //Get all tab views
    var tabViews = $('.tabViews > div',$(this));
    
    //Current tab container
    var tabsContainer = $(this);
    //Hide all tabView containers
    tabViews.hide();
    
        
    //Get all tabs
    var $tabs = $('ul > li', tabsContainer);
    
    
    $tabs.each(function(index){
        $('a',$(this)).click(function(){
            changeTab(index);
            
        });
                    

    });
    
     //call the changeTab method for the first time and selected the starting tab.
    changeTab(startTab);
    
    function changeTab(selectedIndex){
        
        if(selectedIndex != currentIndex){
            switchClass(selectedIndex);
            var previousSelectedTab = $('a',$tabs[currentIndex]);
            var currentSelectedTab = $('a',$tabs[selectedIndex]);
            
            $(previousSelectedTab.attr('href')).hide();         
            $(currentSelectedTab.attr('href')).show();
            currentIndex = selectedIndex;
        }
        
        
    }
    
     //Method to switch the calles for selected and non selected tabs.
    function switchClass(selectedIndex){        
        $tabs.each(function(index){
                            //Get Child Left, Content, right divs
                            var classBuilder = $('div  > div',$(this))
                            
                            //Current Selected Tab
                            if(index == selectedIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tabHover');
                                tabContainer.addClass('tab');
                                $(classBuilder[0]).removeClass('h3');
                                $(classBuilder[0]).addClass('left');
                                $(classBuilder[1]).removeClass('h2');
                                $(classBuilder[1]).addClass('content');
                                $(classBuilder[2]).removeClass('h1');
                                $(classBuilder[2]).addClass('right');
                                                              
                                                              
                            }
                            //Previously selected tab
                            if(index == currentIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tab');
                                tabContainer.addClass('tabHover');
                                
                                $(classBuilder[0]).removeClass('left');
                                $(classBuilder[0]).addClass('h3');
                                $(classBuilder[1]).removeClass('content');
                                $(classBuilder[1]).addClass('h2');
                                $(classBuilder[2]).removeClass('right');
                                $(classBuilder[2]).addClass('h1');
                            }
                            });
    }
    
}

$(function() {
  $('#rfiTabs').tabs(0);
}); 

</script>
</head>
<body>
<div id="rfiTabs">
  <ul class="tabNavigation">
    <li><a href="#rfiBasic">
      <div class="tab">
        <div class="left"></div>
        <div class="content">Basic</div>
        <div class="right"></div>
      </div>
      </a></li>
    <li><a href="#rfiHome">
      <div class="tabHover">
        <div style="" class="h3"></div>
        <div style="" class="h2">Home</div>
        <div class="h1"></div>
      </div>
      </a></li>
  </ul>
  <div class="tabViews" style="">
    <div id="rfiBasic">Test</div>
    <div id="rfiHome">test this</div>
  </div>
</div>
</body>
</html>

Update:

I realized I can optimize the left, content, and center part of the tabs by updating the CSS and Jquery for the hover section:

.tabHover .right {
    float:left;
    height:25px;
    width: 14px;
}
.tabHover .content {
    float:left;
    height:25px;
    text-align: center;
    padding-left: 7px;
    padding-right: 5px;
    padding-top: 4px;
}
.tabHover .left {
    float:left;
    height:25px;
    width: 10px;
}
.tabHover:hover .right {
    background:url(css/tabs/images/tab_Hover_Right.png) no-repeat;
}
.tabHover:hover .content {
    background:url(css/tabs/images/tab_Hover_Content.png) repeat-x;
}
.tabHover:hover .left {
    background:url(css/tabs/images/tab_Hover_Left.png) no-repeat;
}

function switchClass(selectedIndex){        
        $tabs.each(function(index){
                            //Get Child Lef, Content, right divs
                            var classBuilder = $('div  > div',$(this))
                            
                            
                            if(index == selectedIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tabHover');
                                tabContainer.addClass('tab');
                                //$(classBuilder[0]).removeClass('h3');
//                              $(classBuilder[0]).addClass('left');
//                              $(classBuilder[1]).removeClass('h2');
//                              $(classBuilder[1]).addClass('content');
//                              $(classBuilder[2]).removeClass('h1');
//                              $(classBuilder[2]).addClass('right');
                                                              
                                                              
                            }
                            
                            if(index == currentIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tab');
                                tabContainer.addClass('tabHover');
                                
                                //$(classBuilder[0]).removeClass('left');
//                              $(classBuilder[0]).addClass('h3');
//                              $(classBuilder[1]).removeClass('content');
//                              $(classBuilder[1]).addClass('h2');
//                              $(classBuilder[2]).removeClass('right');
//                              $(classBuilder[2]).addClass('h1');
                            }
                            });
    }

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul.tabNavigation {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.tabNavigation li {
    display: inline;
}
ul.tabNavigation li a {
    text-decoration: none;
    color:#000;
}
.tabViews {
    width: 100%;
    border: #8db2e3 solid 1px;
    clear:both;
    height:18px;
    margin-top: -12px;
    background: url(css/tabs/images/tabs_Lower_Header_Background.png) repeat-x;
}
.tab {
    height: 25px;
    font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size:14px;
    float:left;
    padding-left: 4px;
    position: relative;
    top: 1px
}
.tab .right {
    float:left;
    background:url(css/tabs/images/tab_Selected_Right.png) no-repeat;
    height:25px;
    width: 8px;
}
.tab .content {
    float:left;
    background:url(css/tabs/images/tab_Selected_Content.png) repeat-x;
    height:25px;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 4px;
}
.tab .left {
    float:left;
    background:url(css/tabs/images/tab_Selected_Left.png) no-repeat;
    height:25px;
    width: 6px;
}
.tabHover {
    height: 25px;
    font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size:14px;
    float:left;
    padding-left: 4px;
    position: relative;
    top: 1px;
    cursor: pointer;
}
.h1 {
    float:left;
    height:25px;
    width: 14px;
}
.h2 {
    float:left;
    height:25px;
    text-align: center;
    padding-left: 7px;
    padding-right: 5px;
    padding-top: 4px;
}
.h3 {
    float:left;
    height:25px;
    width: 10px;
}
.tabHover:hover .h1 {
    background:url(css/tabs/images/tab_Hover_Right.png) no-repeat;
}
.tabHover:hover .h2 {
    background:url(css/tabs/images/tab_Hover_Content.png) repeat-x;
}
.tabHover:hover .h3 {
    background:url(css/tabs/images/tab_Hover_Left.png) no-repeat;
}
</style>
<script type="text/javascript" src="javascript/jquery/jquery.js"></script>
<script>

$.fn.tabs = function(startTab){
    //Set currentIndex
    var currentIndex = 0;
    
    //Get all tab views
    var tabViews = $('.tabViews > div',$(this));
    
    //Current tab container
    var tabsContainer = $(this);
    //Hide all tabView containers
    tabViews.hide();
    
        
    //Get all tabs
    var $tabs = $('ul > li', tabsContainer);
    
    
    $tabs.each(function(index){
        $('a',$(this)).click(function(){
            changeTab(index);
            
        });
                    

    });
    
     //call the changeTab method for the first time and selected the starting tab.
    changeTab(startTab);
    
    function changeTab(selectedIndex){
        
        if(selectedIndex != currentIndex){
            switchClass(selectedIndex);
            var previousSelectedTab = $('a',$tabs[currentIndex]);
            var currentSelectedTab = $('a',$tabs[selectedIndex]);
            
            $(previousSelectedTab.attr('href')).hide();            
            $(currentSelectedTab.attr('href')).show();
            currentIndex = selectedIndex;
        }
        
        
    }
    
     //Method to switch the calles for selected and non selected tabs.
    function switchClass(selectedIndex){        
        $tabs.each(function(index){
                            //Get Child Left, Content, right divs
                            var classBuilder = $('div  > div',$(this))
                            
                            //Current Selected Tab
                            if(index == selectedIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tabHover');
                                tabContainer.addClass('tab');
                                $(classBuilder[0]).removeClass('h3');
                                $(classBuilder[0]).addClass('left');
                                $(classBuilder[1]).removeClass('h2');
                                $(classBuilder[1]).addClass('content');
                                $(classBuilder[2]).removeClass('h1');
                                $(classBuilder[2]).addClass('right');
                                                              
                                                              
                            }
                            //Previously selected tab
                            if(index == currentIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tab');
                                tabContainer.addClass('tabHover');
                                
                                $(classBuilder[0]).removeClass('left');
                                $(classBuilder[0]).addClass('h3');
                                $(classBuilder[1]).removeClass('content');
                                $(classBuilder[1]).addClass('h2');
                                $(classBuilder[2]).removeClass('right');
                                $(classBuilder[2]).addClass('h1');
                            }
                            });
    }
    
}

$(function() {
  $('#rfiTabs').tabs(0);
}); 

</script>
</head>
<body>
<div id="rfiTabs">
  <ul class="tabNavigation">
    <li><a href="#rfiBasic">
      <div class="tab">
        <div class="left"></div>
        <div class="content">Basic</div>
        <div class="right"></div>
      </div>
      </a></li>
    <li><a href="#rfiHome">
      <div class="tabHover">
        <div style="" class="h3"></div>
        <div style="" class="h2">Home</div>
        <div class="h1"></div>
      </div>
      </a></li>
  </ul>
  <div class="tabViews" style="">
    <div id="rfiBasic">Test</div>
    <div id="rfiHome">test this</div>
  </div>
</div>
</body>
</html>

Update 2: Here is further optimized code as suggesstedI realized I can optimize the left, content, and center part of the tabs by jcubicupdating the CSS and jQuery for the hover section:

<script>

$.fn.tabs = function (startTab) {
    //Set currentIndex
    var currentIndex = 0;

    //Get all tab views
    var tabViews = $('.tabViews > div', $(this));

        
    //Hide all tabView containers
    tabViews.hide();


    //Get all tabs
    var $tabs = $('ul > li', $(this));


    $tabs.each(function (index) {
        $('a', $(this)).click(function () {
            changeTab(index);
        });  
    });

    changeTab(startTab);

    function changeTab(selectedIndex) {

        if (selectedIndex != currentIndex) {
            switchClass(selectedIndex);
            var previousSelectedTab = $('a', $tabs[currentIndex]);
            var currentSelectedTab = $('a', $tabs[selectedIndex]);

            $(previousSelectedTab.attr('href')).hide();
            $(currentSelectedTab.attr('href')).show();
            currentIndex = selectedIndex;
        }


    }

    function switchClass(selectedIndex) {       $tabs.eq(selectedIndex).find('a > div').removeClass('tabHover').addClass('tab');        $tabs.eq(currentIndex).find('a > div').removeClass('tab').addClass('tabHover');

    }       return this;

}

$(function () {
    $('#rfiTabs').tabs(1); });

</script> </head> <body> <div id="rfiTabs">   <ul class="tabNavigation">
    <li><a href="#rfiBasic" title="Basic">
      <div class="tab">
        <div class="left"></div>
        <div class="content">Basic</div>
        <div class="right"></div>
      </div>
      </a></li>
    <li><a href="#rfiHome" title="Home">
      <div class="tabHover">
        <div style="" class="left"></div>
        <div style="" class="content">Home</div>
        <div class="right"></div>
      </div>
      </a></li>   </ul>   <div class="tabViews" style="">
    <div id="rfiBasic" class="tabView">This is the Basic Tab View</div>
    <div id="rfiHome" class="tabView">This is the Home Tab View</div>   </div> </div> </body>

.tabHover .right {
    float:left;
    height:25px;
    width: 14px;
}
.tabHover .content {
    float:left;
    height:25px;
    text-align: center;
    padding-left: 7px;
    padding-right: 5px;
    padding-top: 4px;
}
.tabHover .left {
    float:left;
    height:25px;
    width: 10px;
}
.tabHover:hover .right {
    background:url(css/tabs/images/tab_Hover_Right.png) no-repeat;
}
.tabHover:hover .content {
    background:url(css/tabs/images/tab_Hover_Content.png) repeat-x;
}
.tabHover:hover .left {
    background:url(css/tabs/images/tab_Hover_Left.png) no-repeat;
}

function switchClass(selectedIndex){        
        $tabs.each(function(index){
                            //Get Child Lef, Content, right divs
                            var classBuilder = $('div  > div',$(this))
                            
                            
                            if(index == selectedIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tabHover');
                                tabContainer.addClass('tab');
                                //$(classBuilder[0]).removeClass('h3');
//                                $(classBuilder[0]).addClass('left');
//                                $(classBuilder[1]).removeClass('h2');
//                                $(classBuilder[1]).addClass('content');
//                                $(classBuilder[2]).removeClass('h1');
//                                $(classBuilder[2]).addClass('right');
                                                              
                                                              
                            }
                            
                            if(index == currentIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tab');
                                tabContainer.addClass('tabHover');
                                
                                //$(classBuilder[0]).removeClass('left');
//                                $(classBuilder[0]).addClass('h3');
//                                $(classBuilder[1]).removeClass('content');
//                                $(classBuilder[1]).addClass('h2');
//                                $(classBuilder[2]).removeClass('right');
//                                $(classBuilder[2]).addClass('h1');
                            }
                            });
    }

Possibly optimize my Jquery code?

I am creating a tab plugin. I want to know if there is a better way of doing this or if what I have is good. It works just fine, but there may be some shortcuts or a more optimized way of accomplishing this. I plan to replace the startTab variable with an options set, but I am not quite there yet. Thanks!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul.tabNavigation {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.tabNavigation li {
    display: inline;
}
ul.tabNavigation li a {
    text-decoration: none;
    color:#000;
}
.tabViews {
    width: 100%;
    border: #8db2e3 solid 1px;
    clear:both;
    height:18px;
    margin-top: -12px;
    background: url(css/tabs/images/tabs_Lower_Header_Background.png) repeat-x;
}
.tab {
    height: 25px;
    font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size:14px;
    float:left;
    padding-left: 4px;
    position: relative;
    top: 1px
}
.tab .right {
    float:left;
    background:url(css/tabs/images/tab_Selected_Right.png) no-repeat;
    height:25px;
    width: 8px;
}
.tab .content {
    float:left;
    background:url(css/tabs/images/tab_Selected_Content.png) repeat-x;
    height:25px;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 4px;
}
.tab .left {
    float:left;
    background:url(css/tabs/images/tab_Selected_Left.png) no-repeat;
    height:25px;
    width: 6px;
}
.tabHover {
    height: 25px;
    font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size:14px;
    float:left;
    padding-left: 4px;
    position: relative;
    top: 1px;
    cursor: pointer;
}
.h1 {
    float:left;
    height:25px;
    width: 14px;
}
.h2 {
    float:left;
    height:25px;
    text-align: center;
    padding-left: 7px;
    padding-right: 5px;
    padding-top: 4px;
}
.h3 {
    float:left;
    height:25px;
    width: 10px;
}
.tabHover:hover .h1 {
    background:url(css/tabs/images/tab_Hover_Right.png) no-repeat;
}
.tabHover:hover .h2 {
    background:url(css/tabs/images/tab_Hover_Content.png) repeat-x;
}
.tabHover:hover .h3 {
    background:url(css/tabs/images/tab_Hover_Left.png) no-repeat;
}
</style>
<script type="text/javascript" src="javascript/jquery/jquery.js"></script>
<script>

$.fn.tabs = function(startTab){
    //Set currentIndex
    var currentIndex = 0;
    
    //Get all tab views
    var tabViews = $('.tabViews > div',$(this));
    
    //Current tab container
    var tabsContainer = $(this);
    //Hide all tabView containers
    tabViews.hide();
    
        
    //Get all tabs
    var $tabs = $('ul > li', tabsContainer);
    
    
    $tabs.each(function(index){
        $('a',$(this)).click(function(){
            changeTab(index);
            
        });
                    

    });
    
     //call the changeTab method for the first time and selected the starting tab.
    changeTab(startTab);
    
    function changeTab(selectedIndex){
        
        if(selectedIndex != currentIndex){
            switchClass(selectedIndex);
            var previousSelectedTab = $('a',$tabs[currentIndex]);
            var currentSelectedTab = $('a',$tabs[selectedIndex]);
            
            $(previousSelectedTab.attr('href')).hide();         
            $(currentSelectedTab.attr('href')).show();
            currentIndex = selectedIndex;
        }
        
        
    }
    
     //Method to switch the calles for selected and non selected tabs.
    function switchClass(selectedIndex){        
        $tabs.each(function(index){
                            //Get Child Left, Content, right divs
                            var classBuilder = $('div  > div',$(this))
                            
                            //Current Selected Tab
                            if(index == selectedIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tabHover');
                                tabContainer.addClass('tab');
                                $(classBuilder[0]).removeClass('h3');
                                $(classBuilder[0]).addClass('left');
                                $(classBuilder[1]).removeClass('h2');
                                $(classBuilder[1]).addClass('content');
                                $(classBuilder[2]).removeClass('h1');
                                $(classBuilder[2]).addClass('right');
                                                              
                                                              
                            }
                            //Previously selected tab
                            if(index == currentIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tab');
                                tabContainer.addClass('tabHover');
                                
                                $(classBuilder[0]).removeClass('left');
                                $(classBuilder[0]).addClass('h3');
                                $(classBuilder[1]).removeClass('content');
                                $(classBuilder[1]).addClass('h2');
                                $(classBuilder[2]).removeClass('right');
                                $(classBuilder[2]).addClass('h1');
                            }
                            });
    }
    
}

$(function() {
  $('#rfiTabs').tabs(0);
}); 

</script>
</head>
<body>
<div id="rfiTabs">
  <ul class="tabNavigation">
    <li><a href="#rfiBasic">
      <div class="tab">
        <div class="left"></div>
        <div class="content">Basic</div>
        <div class="right"></div>
      </div>
      </a></li>
    <li><a href="#rfiHome">
      <div class="tabHover">
        <div style="" class="h3"></div>
        <div style="" class="h2">Home</div>
        <div class="h1"></div>
      </div>
      </a></li>
  </ul>
  <div class="tabViews" style="">
    <div id="rfiBasic">Test</div>
    <div id="rfiHome">test this</div>
  </div>
</div>
</body>
</html>

Update:

I realized I can optimize the left, content, and center part of the tabs by updating the CSS and Jquery for the hover section:

.tabHover .right {
    float:left;
    height:25px;
    width: 14px;
}
.tabHover .content {
    float:left;
    height:25px;
    text-align: center;
    padding-left: 7px;
    padding-right: 5px;
    padding-top: 4px;
}
.tabHover .left {
    float:left;
    height:25px;
    width: 10px;
}
.tabHover:hover .right {
    background:url(css/tabs/images/tab_Hover_Right.png) no-repeat;
}
.tabHover:hover .content {
    background:url(css/tabs/images/tab_Hover_Content.png) repeat-x;
}
.tabHover:hover .left {
    background:url(css/tabs/images/tab_Hover_Left.png) no-repeat;
}

function switchClass(selectedIndex){        
        $tabs.each(function(index){
                            //Get Child Lef, Content, right divs
                            var classBuilder = $('div  > div',$(this))
                            
                            
                            if(index == selectedIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tabHover');
                                tabContainer.addClass('tab');
                                //$(classBuilder[0]).removeClass('h3');
//                              $(classBuilder[0]).addClass('left');
//                              $(classBuilder[1]).removeClass('h2');
//                              $(classBuilder[1]).addClass('content');
//                              $(classBuilder[2]).removeClass('h1');
//                              $(classBuilder[2]).addClass('right');
                                                              
                                                              
                            }
                            
                            if(index == currentIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tab');
                                tabContainer.addClass('tabHover');
                                
                                //$(classBuilder[0]).removeClass('left');
//                              $(classBuilder[0]).addClass('h3');
//                              $(classBuilder[1]).removeClass('content');
//                              $(classBuilder[1]).addClass('h2');
//                              $(classBuilder[2]).removeClass('right');
//                              $(classBuilder[2]).addClass('h1');
                            }
                            });
    }

Update 2: Here is further optimized code as suggessted by jcubic:

<script>

$.fn.tabs = function (startTab) {
    //Set currentIndex
    var currentIndex = 0;

    //Get all tab views
    var tabViews = $('.tabViews > div', $(this));

        
    //Hide all tabView containers
    tabViews.hide();


    //Get all tabs
    var $tabs = $('ul > li', $(this));


    $tabs.each(function (index) {
        $('a', $(this)).click(function () {
            changeTab(index);
        });  
    });

    changeTab(startTab);

    function changeTab(selectedIndex) {

        if (selectedIndex != currentIndex) {
            switchClass(selectedIndex);
            var previousSelectedTab = $('a', $tabs[currentIndex]);
            var currentSelectedTab = $('a', $tabs[selectedIndex]);

            $(previousSelectedTab.attr('href')).hide();
            $(currentSelectedTab.attr('href')).show();
            currentIndex = selectedIndex;
        }


    }

    function switchClass(selectedIndex) {       $tabs.eq(selectedIndex).find('a > div').removeClass('tabHover').addClass('tab');        $tabs.eq(currentIndex).find('a > div').removeClass('tab').addClass('tabHover');

    }       return this;

}

$(function () {
    $('#rfiTabs').tabs(1); });

</script> </head> <body> <div id="rfiTabs">   <ul class="tabNavigation">
    <li><a href="#rfiBasic" title="Basic">
      <div class="tab">
        <div class="left"></div>
        <div class="content">Basic</div>
        <div class="right"></div>
      </div>
      </a></li>
    <li><a href="#rfiHome" title="Home">
      <div class="tabHover">
        <div style="" class="left"></div>
        <div style="" class="content">Home</div>
        <div class="right"></div>
      </div>
      </a></li>   </ul>   <div class="tabViews" style="">
    <div id="rfiBasic" class="tabView">This is the Basic Tab View</div>
    <div id="rfiHome" class="tabView">This is the Home Tab View</div>   </div> </div> </body>

Creating a tab plugin

I am creating a tab plugin. I want to know if there is a better way of doing this or if what I have is good. It works just fine, but there may be some shortcuts or a more optimized way of accomplishing this. I plan to replace the startTab variable with an options set, but I am not quite there yet.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul.tabNavigation {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.tabNavigation li {
    display: inline;
}
ul.tabNavigation li a {
    text-decoration: none;
    color:#000;
}
.tabViews {
    width: 100%;
    border: #8db2e3 solid 1px;
    clear:both;
    height:18px;
    margin-top: -12px;
    background: url(css/tabs/images/tabs_Lower_Header_Background.png) repeat-x;
}
.tab {
    height: 25px;
    font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size:14px;
    float:left;
    padding-left: 4px;
    position: relative;
    top: 1px
}
.tab .right {
    float:left;
    background:url(css/tabs/images/tab_Selected_Right.png) no-repeat;
    height:25px;
    width: 8px;
}
.tab .content {
    float:left;
    background:url(css/tabs/images/tab_Selected_Content.png) repeat-x;
    height:25px;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 4px;
}
.tab .left {
    float:left;
    background:url(css/tabs/images/tab_Selected_Left.png) no-repeat;
    height:25px;
    width: 6px;
}
.tabHover {
    height: 25px;
    font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size:14px;
    float:left;
    padding-left: 4px;
    position: relative;
    top: 1px;
    cursor: pointer;
}
.h1 {
    float:left;
    height:25px;
    width: 14px;
}
.h2 {
    float:left;
    height:25px;
    text-align: center;
    padding-left: 7px;
    padding-right: 5px;
    padding-top: 4px;
}
.h3 {
    float:left;
    height:25px;
    width: 10px;
}
.tabHover:hover .h1 {
    background:url(css/tabs/images/tab_Hover_Right.png) no-repeat;
}
.tabHover:hover .h2 {
    background:url(css/tabs/images/tab_Hover_Content.png) repeat-x;
}
.tabHover:hover .h3 {
    background:url(css/tabs/images/tab_Hover_Left.png) no-repeat;
}
</style>
<script type="text/javascript" src="javascript/jquery/jquery.js"></script>
<script>

$.fn.tabs = function(startTab){
    //Set currentIndex
    var currentIndex = 0;
    
    //Get all tab views
    var tabViews = $('.tabViews > div',$(this));
    
    //Current tab container
    var tabsContainer = $(this);
    //Hide all tabView containers
    tabViews.hide();
    
        
    //Get all tabs
    var $tabs = $('ul > li', tabsContainer);
    
    
    $tabs.each(function(index){
        $('a',$(this)).click(function(){
            changeTab(index);
            
        });
                    

    });
    
     //call the changeTab method for the first time and selected the starting tab.
    changeTab(startTab);
    
    function changeTab(selectedIndex){
        
        if(selectedIndex != currentIndex){
            switchClass(selectedIndex);
            var previousSelectedTab = $('a',$tabs[currentIndex]);
            var currentSelectedTab = $('a',$tabs[selectedIndex]);
            
            $(previousSelectedTab.attr('href')).hide();            
            $(currentSelectedTab.attr('href')).show();
            currentIndex = selectedIndex;
        }
        
        
    }
    
     //Method to switch the calles for selected and non selected tabs.
    function switchClass(selectedIndex){        
        $tabs.each(function(index){
                            //Get Child Left, Content, right divs
                            var classBuilder = $('div  > div',$(this))
                            
                            //Current Selected Tab
                            if(index == selectedIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tabHover');
                                tabContainer.addClass('tab');
                                $(classBuilder[0]).removeClass('h3');
                                $(classBuilder[0]).addClass('left');
                                $(classBuilder[1]).removeClass('h2');
                                $(classBuilder[1]).addClass('content');
                                $(classBuilder[2]).removeClass('h1');
                                $(classBuilder[2]).addClass('right');
                                                              
                                                              
                            }
                            //Previously selected tab
                            if(index == currentIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tab');
                                tabContainer.addClass('tabHover');
                                
                                $(classBuilder[0]).removeClass('left');
                                $(classBuilder[0]).addClass('h3');
                                $(classBuilder[1]).removeClass('content');
                                $(classBuilder[1]).addClass('h2');
                                $(classBuilder[2]).removeClass('right');
                                $(classBuilder[2]).addClass('h1');
                            }
                            });
    }
    
}

$(function() {
  $('#rfiTabs').tabs(0);
}); 

</script>
</head>
<body>
<div id="rfiTabs">
  <ul class="tabNavigation">
    <li><a href="#rfiBasic">
      <div class="tab">
        <div class="left"></div>
        <div class="content">Basic</div>
        <div class="right"></div>
      </div>
      </a></li>
    <li><a href="#rfiHome">
      <div class="tabHover">
        <div style="" class="h3"></div>
        <div style="" class="h2">Home</div>
        <div class="h1"></div>
      </div>
      </a></li>
  </ul>
  <div class="tabViews" style="">
    <div id="rfiBasic">Test</div>
    <div id="rfiHome">test this</div>
  </div>
</div>
</body>
</html>

I realized I can optimize the left, content, and center part of the tabs by updating the CSS and jQuery for the hover section:

.tabHover .right {
    float:left;
    height:25px;
    width: 14px;
}
.tabHover .content {
    float:left;
    height:25px;
    text-align: center;
    padding-left: 7px;
    padding-right: 5px;
    padding-top: 4px;
}
.tabHover .left {
    float:left;
    height:25px;
    width: 10px;
}
.tabHover:hover .right {
    background:url(css/tabs/images/tab_Hover_Right.png) no-repeat;
}
.tabHover:hover .content {
    background:url(css/tabs/images/tab_Hover_Content.png) repeat-x;
}
.tabHover:hover .left {
    background:url(css/tabs/images/tab_Hover_Left.png) no-repeat;
}

function switchClass(selectedIndex){        
        $tabs.each(function(index){
                            //Get Child Lef, Content, right divs
                            var classBuilder = $('div  > div',$(this))
                            
                            
                            if(index == selectedIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tabHover');
                                tabContainer.addClass('tab');
                                //$(classBuilder[0]).removeClass('h3');
//                                $(classBuilder[0]).addClass('left');
//                                $(classBuilder[1]).removeClass('h2');
//                                $(classBuilder[1]).addClass('content');
//                                $(classBuilder[2]).removeClass('h1');
//                                $(classBuilder[2]).addClass('right');
                                                              
                                                              
                            }
                            
                            if(index == currentIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tab');
                                tabContainer.addClass('tabHover');
                                
                                //$(classBuilder[0]).removeClass('left');
//                                $(classBuilder[0]).addClass('h3');
//                                $(classBuilder[1]).removeClass('content');
//                                $(classBuilder[1]).addClass('h2');
//                                $(classBuilder[2]).removeClass('right');
//                                $(classBuilder[2]).addClass('h1');
                            }
                            });
    }
added a tag
Link
Malachi
Malachi
  • 28.7k
  • 11
  • 86
  • 188
Tweeted twitter.com/#!/StackCodeReview/status/39970857048748032
added 2285 characters in body; edited tags; added 112 characters in body
Source Link
DDiVita
DDiVita
  • 453
  • 5
  • 11

View the current updated version here

.tabHover .right {
    float:left;
    height:25px;
    width: 14px;
}
.tabHover .content {
    float:left;
    height:25px;
    text-align: center;
    padding-left: 7px;
    padding-right: 5px;
    padding-top: 4px;
}
.tabHover .left {
    float:left;
    height:25px;
    width: 10px;
}
.tabHover:hover .right {
    background:url(css/tabs/images/tab_Hover_Right.png) no-repeat;
}
.tabHover:hover .content {
    background:url(css/tabs/images/tab_Hover_Content.png) repeat-x;
}
.tabHover:hover .left {
    background:url(css/tabs/images/tab_Hover_Left.png) no-repeat;
}

function switchClass(selectedIndex){        
        $tabs.each(function(index){
                            //Get Child Lef, Content, right divs
                            var classBuilder = $('div  > div',$(this))
                            
                            
                            if(index == selectedIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tabHover');
                                tabContainer.addClass('tab');
                                //$(classBuilder[0]).removeClass('h3');
//                              $(classBuilder[0]).addClass('left');
//                              $(classBuilder[1]).removeClass('h2');
//                              $(classBuilder[1]).addClass('content');
//                              $(classBuilder[2]).removeClass('h1');
//                              $(classBuilder[2]).addClass('right');
                                                              
                                                              
                            }
                            
                            if(index == currentIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tab');
                                tabContainer.addClass('tabHover');
                                
                                //$(classBuilder[0]).removeClass('left');
//                              $(classBuilder[0]).addClass('h3');
//                              $(classBuilder[1]).removeClass('content');
//                              $(classBuilder[1]).addClass('h2');
//                              $(classBuilder[2]).removeClass('right');
//                              $(classBuilder[2]).addClass('h1');
                            }
                            });
    }

Update 2: Here is further optimized code as suggessted by jcubic:

<script>

$.fn.tabs = function (startTab) {
    //Set currentIndex
    var currentIndex = 0;

    //Get all tab views
    var tabViews = $('.tabViews > div', $(this));

        
    //Hide all tabView containers
    tabViews.hide();


    //Get all tabs
    var $tabs = $('ul > li', $(this));


    $tabs.each(function (index) {
        $('a', $(this)).click(function () {
            changeTab(index);
        });  
    });

    changeTab(startTab);

    function changeTab(selectedIndex) {

        if (selectedIndex != currentIndex) {
            switchClass(selectedIndex);
            var previousSelectedTab = $('a', $tabs[currentIndex]);
            var currentSelectedTab = $('a', $tabs[selectedIndex]);

            $(previousSelectedTab.attr('href')).hide();
            $(currentSelectedTab.attr('href')).show();
            currentIndex = selectedIndex;
        }


    }

    function switchClass(selectedIndex) {       $tabs.eq(selectedIndex).find('a > div').removeClass('tabHover').addClass('tab');        $tabs.eq(currentIndex).find('a > div').removeClass('tab').addClass('tabHover');

    }       return this;

}

$(function () {
    $('#rfiTabs').tabs(1); });

</script> </head> <body> <div id="rfiTabs">   <ul class="tabNavigation">
    <li><a href="#rfiBasic" title="Basic">
      <div class="tab">
        <div class="left"></div>
        <div class="content">Basic</div>
        <div class="right"></div>
      </div>
      </a></li>
    <li><a href="#rfiHome" title="Home">
      <div class="tabHover">
        <div style="" class="left"></div>
        <div style="" class="content">Home</div>
        <div class="right"></div>
      </div>
      </a></li>   </ul>   <div class="tabViews" style="">
    <div id="rfiBasic" class="tabView">This is the Basic Tab View</div>
    <div id="rfiHome" class="tabView">This is the Home Tab View</div>   </div> </div> </body>

.tabHover .right {
    float:left;
    height:25px;
    width: 14px;
}
.tabHover .content {
    float:left;
    height:25px;
    text-align: center;
    padding-left: 7px;
    padding-right: 5px;
    padding-top: 4px;
}
.tabHover .left {
    float:left;
    height:25px;
    width: 10px;
}
.tabHover:hover .right {
    background:url(css/tabs/images/tab_Hover_Right.png) no-repeat;
}
.tabHover:hover .content {
    background:url(css/tabs/images/tab_Hover_Content.png) repeat-x;
}
.tabHover:hover .left {
    background:url(css/tabs/images/tab_Hover_Left.png) no-repeat;
}

function switchClass(selectedIndex){        
        $tabs.each(function(index){
                            //Get Child Lef, Content, right divs
                            var classBuilder = $('div  > div',$(this))
                            
                            
                            if(index == selectedIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tabHover');
                                tabContainer.addClass('tab');
                                //$(classBuilder[0]).removeClass('h3');
//                              $(classBuilder[0]).addClass('left');
//                              $(classBuilder[1]).removeClass('h2');
//                              $(classBuilder[1]).addClass('content');
//                              $(classBuilder[2]).removeClass('h1');
//                              $(classBuilder[2]).addClass('right');
                                                              
                                                              
                            }
                            
                            if(index == currentIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tab');
                                tabContainer.addClass('tabHover');
                                
                                //$(classBuilder[0]).removeClass('left');
//                              $(classBuilder[0]).addClass('h3');
//                              $(classBuilder[1]).removeClass('content');
//                              $(classBuilder[1]).addClass('h2');
//                              $(classBuilder[2]).removeClass('right');
//                              $(classBuilder[2]).addClass('h1');
                            }
                            });
    }

View the current updated version here

.tabHover .right {
    float:left;
    height:25px;
    width: 14px;
}
.tabHover .content {
    float:left;
    height:25px;
    text-align: center;
    padding-left: 7px;
    padding-right: 5px;
    padding-top: 4px;
}
.tabHover .left {
    float:left;
    height:25px;
    width: 10px;
}
.tabHover:hover .right {
    background:url(css/tabs/images/tab_Hover_Right.png) no-repeat;
}
.tabHover:hover .content {
    background:url(css/tabs/images/tab_Hover_Content.png) repeat-x;
}
.tabHover:hover .left {
    background:url(css/tabs/images/tab_Hover_Left.png) no-repeat;
}

function switchClass(selectedIndex){        
        $tabs.each(function(index){
                            //Get Child Lef, Content, right divs
                            var classBuilder = $('div  > div',$(this))
                            
                            
                            if(index == selectedIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tabHover');
                                tabContainer.addClass('tab');
                                //$(classBuilder[0]).removeClass('h3');
//                              $(classBuilder[0]).addClass('left');
//                              $(classBuilder[1]).removeClass('h2');
//                              $(classBuilder[1]).addClass('content');
//                              $(classBuilder[2]).removeClass('h1');
//                              $(classBuilder[2]).addClass('right');
                                                              
                                                              
                            }
                            
                            if(index == currentIndex){
                                var tabContainer = $('a > div',$(this))
                                tabContainer.removeClass('tab');
                                tabContainer.addClass('tabHover');
                                
                                //$(classBuilder[0]).removeClass('left');
//                              $(classBuilder[0]).addClass('h3');
//                              $(classBuilder[1]).removeClass('content');
//                              $(classBuilder[1]).addClass('h2');
//                              $(classBuilder[2]).removeClass('right');
//                              $(classBuilder[2]).addClass('h1');
                            }
                            });
    }

Update 2: Here is further optimized code as suggessted by jcubic:

<script>

$.fn.tabs = function (startTab) {
    //Set currentIndex
    var currentIndex = 0;

    //Get all tab views
    var tabViews = $('.tabViews > div', $(this));

        
    //Hide all tabView containers
    tabViews.hide();


    //Get all tabs
    var $tabs = $('ul > li', $(this));


    $tabs.each(function (index) {
        $('a', $(this)).click(function () {
            changeTab(index);
        });  
    });

    changeTab(startTab);

    function changeTab(selectedIndex) {

        if (selectedIndex != currentIndex) {
            switchClass(selectedIndex);
            var previousSelectedTab = $('a', $tabs[currentIndex]);
            var currentSelectedTab = $('a', $tabs[selectedIndex]);

            $(previousSelectedTab.attr('href')).hide();
            $(currentSelectedTab.attr('href')).show();
            currentIndex = selectedIndex;
        }


    }

    function switchClass(selectedIndex) {       $tabs.eq(selectedIndex).find('a > div').removeClass('tabHover').addClass('tab');        $tabs.eq(currentIndex).find('a > div').removeClass('tab').addClass('tabHover');

    }       return this;

}

$(function () {
    $('#rfiTabs').tabs(1); });

</script> </head> <body> <div id="rfiTabs">   <ul class="tabNavigation">
    <li><a href="#rfiBasic" title="Basic">
      <div class="tab">
        <div class="left"></div>
        <div class="content">Basic</div>
        <div class="right"></div>
      </div>
      </a></li>
    <li><a href="#rfiHome" title="Home">
      <div class="tabHover">
        <div style="" class="left"></div>
        <div style="" class="content">Home</div>
        <div class="right"></div>
      </div>
      </a></li>   </ul>   <div class="tabViews" style="">
    <div id="rfiBasic" class="tabView">This is the Basic Tab View</div>
    <div id="rfiHome" class="tabView">This is the Home Tab View</div>   </div> </div> </body>
Update to CSS and JQuery methods
Source Link
DDiVita
DDiVita
  • 453
  • 5
  • 11
Post Migrated Here from stackoverflow.com (revisions)
Source Link
DDiVita
DDiVita
  • 453
  • 5
  • 11