Solved

how do you make a tab "active" by default based on a url parameter?

Posted on 2014-07-31
14
112 Views
Last Modified: 2014-07-31
Hi,

I have a page where I show and hide div's based on some <a target> clicks.
It works but I would like to have the GenInfo div be in the active state when there is no "#" or referenceID in the url.  Right now the div shows but I can't make the tab be "active"

thanks!

Here is my code for better clarification
<script type="text/javascript">
$(document).ready(function() { 
    $("div a").click(function() {
        var v = $(this).attr("id");
        $("#recipientId").val(v);
    });
});
</script> 
<style>
.blue_container {
	   background-color:#417DBE;
    margin: 0px 0px 0px 0px;
    padding: 10px 15px 0px 5px;
	width:180px;
	height:95px;
	margin-top:-20px;
	    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align:left;
}
.ForMembers a {
	font-size:12px;
	font-family:Georgia, "Times New Roman", Times, serif;
}
#MemCovInfo {
width:685px;
}
#ForMembers {
   background-color:#417DBE;
    margin: 0px 0px 0px 0px;
    padding: 10px 15px 0px 5px;
	width:180px;
	height:95px;
	margin-top:-20px;
	    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align:left;
	} 
	
	#ForMembers a {
	color:#FFF;
	 font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    cursor:pointer;
	}
#ForMembers a:hover {
color:#000;
}

#ForMembers:hover {
background-color:#CCC;
 color:#000;
 cursor:pointer;
}

	#Coverage {
   background-color:#417DBE;
    margin: 0px 0px 0px 0px;
    padding: 10px 15px 0px 5px;
    width:200px;
	height:95px;	
	margin-left:205px;
	margin-top:-105px;
	   -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align:left;	
	}
	#Coverage:hover {
background-color:#CCC;
 cursor:pointer;
}
	#Coverage a  {	
	 font-family:Georgia, "Times New Roman", Times, serif;
   font-size:20px;
   color:#FFF;
	}
	#Coverage a:hover  {
   color:#000;
	}	
	#GenInfo {
   background-color:#417DBE;
    margin: 0px 0px 0px 0px;
    padding: 10px 15px 0px 5px;
	width:190px;
	height:95px;
	font-size:14px;
	margin-left:430px;
	margin-top:-105px;
	   -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align:left;	
	}
	
	#GenInfo:hover {
	background-color:#CCC;
 cursor:pointer;
 }	
#GenInfo a  {
	color:#FFF;
	 font-family:Georgia, "Times New Roman", Times, serif;
  font-size:20px;
	}
	
	#GenInfo a:hover {
	color:#000;
	}
.active {
background-color:#ccc;
color:#000000;
}
</style>
<script>
$(document).ready(function() { 
$('.label_copy').hide();
lhash=location.hash
		if(lhash==""){
			lhash="#div6"
		}

		$("a[href='"+lhash+"']").closest("div").addClass("active");
		$(lhash).show();
		
$('.show').click(function () {
    $('.label_copy').hide();
    $('#div' + $(this).attr('target')).show();
});

$('.hide').click(function () {
    $('.label_copy').hide();
  
});
});
</script>

<div id="ForMembers" class="ForMembers" >
    <span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Members</span><br/>
  
   <a id="1" class="show subcontact" target="1" style="font-size:12px;">Report</a><br/>

 <a id="7" class="show subcontact" target="7" style="font-size:12px;">Member </a><br/>
 
  <a id="8" class="show subcontact" target="8" style="font-size:12px;">Patient </a>
  </div>
    	<div id="Coverage">
    	
    	  <span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Coverage</span><br/>
   	 
   	  <a id="3" class="show subcontact" target="3" style="font-size:12px;">Get a Quote</a><br/>
   
    <a id="4" class="show subcontact" target="4"  style="font-size:12px;">Apply for Coverage</a><br/>
    	   
    	   <a id="5" class="show subcontact" target="5"  style="font-size:12px;">Find an Agent</a><br/>
  	    </p>
    	</div>
    	
    	<div id="GenInfo">
    <span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">General Information</span><br/>
    	
    	 <a id="6" class="show subcontact" target="6" style="font-size:12px;">Contact us by email</a>
    	
    	</div>
   
	

    
 
<div id="div1"  class="label_copy">
claim info
</div>
  
  
  
    <div id="div3" class="label_copy">
quote info
    </div> 
      <div id="div4" class="label_copy">
apply info
    </div>
      <div id="div5" class="label_copy">
agent info
    </div>
      <div id="div6" class="label_copy">
contact info
    </div>
      <div id="div7" class="label_copy">
  <p>member info</p>
    </div>
      <div id="div8" class="label_copy">
   <p>A patient info</p>
    </div>

Open in new window

0
Comment
Question by:smfmetro10
  • 7
  • 7
14 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40232800
Which element should be in the active state?

Replace #el with the element id and place in your document ready function
$("#el").addClass("active")
0
 

Author Comment

by:smfmetro10
ID: 40232854
the GenInfo div should be active.

$("a[href='"+lhash+"']").closest("GenInfo").addClass("active");
doesn't seem to work
0
 
LVL 58

Expert Comment

by:Gary
ID: 40232864
Use this in the doc ready function

if(location.hash=="#"||location.hash==""){
     $("#GenInfo").addClass("active");
}


Change your active class like so

.active {
    background-color: #ccc !important;
    color: #000000;
}
0
 

Author Comment

by:smfmetro10
ID: 40232877
Hmm.. It's close. The div is active but now when you click on any of the links none of the div's with class="label_copy  show up.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40232886
Code is working fine for me using your exact code.
0
 

Author Comment

by:smfmetro10
ID: 40232896
Is this correct?

<script>
$(document).ready(function() { 
$('.label_copy').hide();
if(location.hash=="#"||location.hash==""){
     $("#GenInfo").addClass("active");
}
		$(lhash).show();
		
$('.show').click(function () {
    $('.label_copy').hide();
    $('#div' + $(this).attr('target')).show();
});

$('.hide').click(function () {
    $('.label_copy').hide();
  
});
});
</script>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40232929
Yes
And add important to the active class

.active {
background-color:#ccc !important;
color:#000000;
}
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:smfmetro10
ID: 40232940
yeah- i did that but somehow when you click any of the links none of the div's show up
0
 
LVL 58

Expert Comment

by:Gary
ID: 40232943
This is the code I am using

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
    $("div a").click(function() {
        var v = $(this).attr("id");
        $("#recipientId").val(v);
    });
});
</script> 
<style>
.blue_container {
	   background-color:#417DBE;
    margin: 0px 0px 0px 0px;
    padding: 10px 15px 0px 5px;
	width:180px;
	height:95px;
	margin-top:-20px;
	    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align:left;
}
.ForMembers a {
	font-size:12px;
	font-family:Georgia, "Times New Roman", Times, serif;
}
#MemCovInfo {
width:685px;
}
#ForMembers {
   background-color:#417DBE;
    margin: 0px 0px 0px 0px;
    padding: 10px 15px 0px 5px;
	width:180px;
	height:95px;
	margin-top:-20px;
	    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align:left;
	} 
	
	#ForMembers a {
	color:#FFF;
	 font-family:Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    cursor:pointer;
	}
#ForMembers a:hover {
color:#000;
}

#ForMembers:hover {
background-color:#CCC;
 color:#000;
 cursor:pointer;
}

	#Coverage {
   background-color:#417DBE;
    margin: 0px 0px 0px 0px;
    padding: 10px 15px 0px 5px;
    width:200px;
	height:95px;	
	margin-left:205px;
	margin-top:-105px;
	   -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align:left;	
	}
	#Coverage:hover {
background-color:#CCC;
 cursor:pointer;
}
	#Coverage a  {	
	 font-family:Georgia, "Times New Roman", Times, serif;
   font-size:20px;
   color:#FFF;
	}
	#Coverage a:hover  {
   color:#000;
	}	
	#GenInfo {
   background-color:#417DBE;
    margin: 0px 0px 0px 0px;
    padding: 10px 15px 0px 5px;
	width:190px;
	height:95px;
	font-size:14px;
	margin-left:430px;
	margin-top:-105px;
	   -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align:left;	
	}
	
	#GenInfo:hover {
	background-color:#CCC;
 cursor:pointer;
 }	
#GenInfo a  {
	color:#FFF;
	 font-family:Georgia, "Times New Roman", Times, serif;
  font-size:20px;
	}
	
	#GenInfo a:hover {
	color:#000;
	}
.active {
background-color:#ccc !important;
color:#000000;
}
</style>
<script>
$(document).ready(function() { 
$('.label_copy').hide();
lhash=location.hash
if(location.hash==""){
      $("#GenInfo").addClass("active");
 }
		if(lhash==""){
			lhash="#div6"
		}

		$("a[href='"+lhash+"']").closest("div").addClass("active");
		$(lhash).show();
		
$('.show').click(function () {
    $('.label_copy').hide();
    $('#div' + $(this).attr('target')).show();
});

$('.hide').click(function () {
    $('.label_copy').hide();
  
});
});
</script>

<div id="ForMembers" class="ForMembers" >
    <span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Members</span><br/>
  
   <a id="1" class="show subcontact" target="1" style="font-size:12px;">Report</a><br/>

 <a id="7" class="show subcontact" target="7" style="font-size:12px;">Member </a><br/>
 
  <a id="8" class="show subcontact" target="8" style="font-size:12px;">Patient </a>
  </div>
    	<div id="Coverage">
    	
    	  <span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Coverage</span><br/>
   	 
   	  <a id="3" class="show subcontact" target="3" style="font-size:12px;">Get a Quote</a><br/>
   
    <a id="4" class="show subcontact" target="4"  style="font-size:12px;">Apply for Coverage</a><br/>
    	   
    	   <a id="5" class="show subcontact" target="5"  style="font-size:12px;">Find an Agent</a><br/>
  	    </p>
    	</div>
    	
    	<div id="GenInfo">
    <span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">General Information</span><br/>
    	
    	 <a id="6" class="show subcontact" target="6" style="font-size:12px;">Contact us by email</a>
    	
    	</div>
   
	

    
 
<div id="div1"  class="label_copy">
claim info
</div>
  
  
  
    <div id="div3" class="label_copy">
quote info
    </div> 
      <div id="div4" class="label_copy">
apply info
    </div>
      <div id="div5" class="label_copy">
agent info
    </div>
      <div id="div6" class="label_copy">
contact info
    </div>
      <div id="div7" class="label_copy">
  <p>member info</p>
    </div>
      <div id="div8" class="label_copy">
   <p>A patient info</p>
    </div>

Open in new window

0
 

Author Comment

by:smfmetro10
ID: 40232945
Hey out of curiosity, are the words "contact info" being displayed right below the two blue and one grey div?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40232946
Yes
0
 

Author Comment

by:smfmetro10
ID: 40232977
weird. It doesnt even work on my testing server.

Could you just copy the code back to me? See if that works, I must be doing something wrong.
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40232978
I already did just up above.
0
 

Author Closing Comment

by:smfmetro10
ID: 40233013
Thank You! I had an "</p> </div>" in there somewhere :)
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now