Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Is there a better way to do this?

    This code is for tabbed content (click a tab and it changes what is displaying beneath the tabs).

    My javascript:
    Code:
    var ztabs = new Array();
    
    $(document).ready(function() {		
    	$("a[name^='tab-']").each(function() {
    		$(this).click(function() {
    			if( $("#" + this.name).is(':hidden') ) {
    				for(mi=1;mi<4;mi++) {
    					ztabs[mi] = document.getElementById('tab-'+mi);
    					if( ztabs[mi].style.display == "") {
    						ztabs[mi].style.display = "none";
    					}
    				}
    				$("#" + this.name).show();
    			}		
    			return false;
    		});
    	});
    });
    my html:
    Code:
    			<table class="InfoTable">
    				<tbody>
    					<tr>
    						<td colspan="4" class="InfoTableItem">
    							product1 name
    						</td>
    					</tr>
    					<tr>
    						<td class="InfoTableTab">
    							<a href="#"  name="tab-1">Description</a>
    						</td>
    						<td class="InfoTableTab" name="tab-2">
    							<a href="#"  name="tab-2">Application</a>
    						</td>
    						<td class="InfoTableTab" name="tab-3">
    							<a href="#"  name="tab-3">Datasheet</a>
    						</td>
    						<td class="InfoTableSpace">
    						</td>
    					</tr>
    					<tr>
    						<td colspan="4" class="InfoTableTabContent">
    							<div id="tab-1">
    							Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat...
    							</div>
    							<div id="tab-2" style="display: none;">
    							2
    							</div>
    							<div id="tab-3" style="display: none;">
    							3
    							</div>
    						</td>
    					</tr>
    				</tbody>
    			</table>

    Any ideas on how to crunch that nested if statement inside a loop inside an if statement?
    Last edited by sethwb; 07-14-2009 at 10:37 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,621
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    1. A table isn’t the correct markup to use as this isn’t tabular data.
    2. The name attribute isn’t allowed on anything except form controls.
    3. Why don’t you use one of the many tab scripts that are already out there?

  • #3
    Regular Coder
    Join Date
    Aug 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts
    #1 - I'm not even sure what you mean by this? They are tabs on my screen!

    #2 - I wanted to use a class, but we are using multiple classes.. and I had a hard time figuring out how to only detect the one (even if there were two or more classes).

    #3 - I am trying to strike a balance between learning to write JavaScript from scratch and getting the darn thing done. Obviously jQuery is not the way to go if I want to become proficient in writing jS from scratch. However, I know there are tons of things to think about when structuring my scripts and so I'm just seeking advice and ideas that will help me learn new methods & practices and/or sharpen the ones I'm already using.

    I hope that makes sense.

  • #4
    Regular Coder
    Join Date
    Aug 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I figured it all out! Here it is for anyone else with the same situation I hope this helps you!

    Code:
    	$(document).ready(function() {		
    	$(".InfoTableTab a").click(function() {
    		$(this).closest(".InfoTable").find(".InfoTabDiv").hide();
    		$("#" + this.name).show();
    		return false;
    	});
    });
    Thanks for all your help mr. Stephan.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,292
    Thanks
    10
    Thanked 583 Times in 564 Posts
    Quote Originally Posted by VIPStephan View Post
    1. The name attribute isn’t allowed on anything except form controls.

    and anchors, and images, and maps, and forms, and frames, and objects, and meta...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •