how do you add an active state based on a URL parameter?

Hi,

I am trying to add an "active" class based on a URL parameter.  For example if the URL had "?recipientId=1" then the report link would be black and the Members div would have a background color of #CCC.

I'm trying to duplicate the look from clicking on the various links with putting in the URL.

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>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
	$(document).ready(function() {
	
		$("div a").click(function() {

			$("#ForMembers,#Coverage,#GenInfo").removeClass("active");
			$("#ForMembers a,#Coverage a,#GenInfo a").removeClass("active");
			$(this).closest("div a").addClass("active");

			var v = $(this).attr("id");

			$("#recipientId").val(v);

		//	lhash = location.hash;
			lhash = $(this).attr("href").substring(1);

			if(lhash==""){
				lhash="6"
			}
	
			$("a[href='#"+lhash+"']").closest("div").addClass("active");

			$('.label_copy').hide();
			$('#div'+lhash).show();

			if($("#recipientId").val()==6 || $(" #recipientId").val()==7 || $("#recipientId").val()==8) {
				$("#contactForm").show();
			}
			else {
				$("#contactForm").hide ();
			}	
			
			

//			$('.show').click(function () {
//				$('.label_copy').hide();
//				$('#div' + $(this).attr('href')).show();
//			});
	
			$('.hide').click(function () {
				$('.label_copy').hide();
			});

		});

	});
</script>

<script>
	$(document).ready(function() {

		url = window.location.search.substring(1);
		urlvars = url.split('&');

		for (i = 0; i < urlvars.length; i++){  
			param = urlvars[i].split('=');  

			if (param[0] == "recipientId"){  
				$("#recipientId").val(param[1]) 
			}  
		}
	})
</script>
<script>
$(document).ready(function() {
  if($("#recipientId").val()==8 ) {
				$("#div8").show();
				$("#contactForm").show();
			
			}
		
})
			</script>
            
            
            
            <script>
$(document).ready(function() {
  if($("#recipientId").val()==1 ) {
				$("#div1").show();
	$(this).closest("div a").addClass("active");
			
			}
		
})
			</script>
            <script>
$(document).ready(function() {
  if($("#recipientId").val()==7 ) {
				$("#div7").show();
				$("#contactForm").show();
			
			}
		
})
			</script>
            <script>
$(document).ready(function() {
  if($("#recipientId").val()==3 ) {
				$("#div3").show();
			
			}
		
})
			</script>
            <script>
$(document).ready(function() {
  if($("#recipientId").val()==4 ) {
				$("#div4").show();
			
			}
		
})
			</script>
            <script>
$(document).ready(function() {
  if($("#recipientId").val()==5 ) {
				$("#div5").show();
			
			}
		
})
			</script>
            <script>
$(document).ready(function() {
  if($("#recipientId").val()==6 ) {
				$("#div6").show();
				$("#contactForm").show();
			
			}
		
})
			</script>
<style>
	a.active { 
		color:black;
	}
	.link.active { 
		color:black;
	}
	
	.ForMembers a {
		font-size:12px;
		font-family:Georgia, "Times New Roman", Times, serif;
	}

	.MemCovInfo.active {
		background-color:#CCC;
		width:685px;
	}

	.MemCovInfo {
		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;
	} 
	
	.MemCovInfo a {
		color:#FFF;
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size: 20px;
		cursor:pointer;
	}

	.MemCovInfo a:hover {
		color:#000;
	}

	.MemCovInfo a.active {
		color:#000;
	}

	.MemCovInfo:hover {
		background-color:#CCC;
		color:#000;
		cursor:pointer;
	}
	
	.show.active {
		color:#000;
	}

	#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 a.active {
		color:#000;
	}

	#ForMembers.active {
		background-color:#CCC;
		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.active {
		color:#000;
	}

	#Coverage.active {
		background-color:#CCC;
	}

	#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.active {
		color:#000;
	}

	#GenInfo.active {
		background-color:#CCC;
	}

	#GenInfo a:hover {
		color:#000;
	}

	#contactForm {
		display:none;
	}
	
	.label_copy {
		display:none;
	}
</style>

</head>

<body>

	<div id="ForMembers" class="MemCovInfo" style="margin-top:40px;" >
	
		<span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Members</span><br/>
	
		<a id="1" href="#1" target="_self" class="link show" style="font-size:12px;">Report</a><br/>
		<a id="7" href="#7" target="_self" class="link show" style="font-size:12px;">Member </a><br/>
		<a id="8" href="#8" target="_self" class="link show" style="font-size:12px;">Patient </a>

	</div>

	<div id="Coverage" class="MemCovInfo">
	
		<span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Coverage</span><br/>

		<a id="3" href="#3" target="_self" class="link show" style="font-size:12px;">Get a Quote</a><br/>
		<a id="4" href="#4" target="_self" class="link show" style="font-size:12px;">Apply for Coverage</a><br/>
		<a id="5" href="#5" target="_self" class="link show" style="font-size:12px;">Find an Agent</a>
	
	</div>
	
	<div id="GenInfo" class="MemCovInfo">

		<span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">General Information</span><br/>
	
		<a id="6" href="#6" target="_self" class="link show" style="font-size:12px;">Contact us by email</a>
	
	</div>

	<div id="div1" class="label_copy">
		<h2>claim info</h2>
	</div>

	<div id="div7" class="label_copy">
		<h2>member info</h2>
	</div>

	<div id="div8" class="label_copy">
		<h2>Patient info</h2>
	</div>

	<div id="div3" class="label_copy">
		<h2>Quote info</h2>
	</div>

	<div id="div4" class="label_copy">
		<h2>Coverage info</h2>
	</div>

	<div id="div5" class="label_copy">
		<h2>Agent info</h2>
	</div>

	<div id="div6" class="label_copy">
		<h2>contact info</h2>
	</div>

	<form id="contactForm" name="contactForm" method="post" encType="multipart/form-data" />

        <input type="hidden" value="<!--$ssServerRelativeSiteRoot-->ContactUs/Form/index.htm?formSubmitted=1" name="RedirectUrl" />
        <input type="hidden" id="recipientId" name="recipientId" value="" />

  		<!-- Subject -->
    	<div style="margin-bottom:10px;">

			<label for="emailSubject">Subject:</label><br />
			<input class="text" maxlength="80" size="40" type="text" name="emailSubject" id="emailSubject" />

        </div>

        <!-- Email -->
		<div style="margin-bottom:10px;">

			<label for="emailAddress">E-mail:</label><br />
			<input class="text" size="30" type="text" name="emailAddress" id="emailAddress" maxlength="50" />

        </div> 

        <!-- Message -->
		<div style="margin-bottom:10px;">

			<label for="txt_Message">Message:</label><br />
			<textarea id="txt_Message" name="txt_Message" rows="4" wrap="virtual" cols="42" maxlength="400"></textarea>

        </div>
        
	</form>

</body>
</html>

Open in new window

smfmetro10Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
No points for this, but why aren't you using the HTML5 doctype?
0
smfmetro10Author Commented:
oh.. I dont know. I was just using Dreamweaver
0
Tom BeckCommented:
Try this as a script block to replace all the script blocks you have on the page.
<script>
	$(document).ready(function() {
	
		$("div a").click(function() {

			$("#ForMembers,#Coverage,#GenInfo").removeClass("active");
			$("#ForMembers a,#Coverage a,#GenInfo a").removeClass("active");
			$(this).closest("div a").addClass("active");

			var v = $(this).attr("id");

			$("#recipientId").val(v);

		//	lhash = location.hash;
			lhash = $(this).attr("href").substring(1);

			if(lhash==""){
				lhash="6"
			}
	
			$("a[href='#"+lhash+"']").closest("div").addClass("active");

			$('.label_copy').hide();
			$('#div'+lhash).show();

			if($("#recipientId").val()==6 || $(" #recipientId").val()==7 || $("#recipientId").val()==8) {
				$("#contactForm").show();
			}
			else {
				$("#contactForm").hide ();
			}	
			
			

//			$('.show').click(function () {
//				$('.label_copy').hide();
//				$('#div' + $(this).attr('href')).show();
//			});
	
			$('.hide').click(function () {
				$('.label_copy').hide();
			});

		});

		url = window.location.search.substring(1);
		urlvars = url.split('&');
		var recipID = '';

		for (i = 0; i < urlvars.length; i++){  
			param = urlvars[i].split('=');  

			if (param[0] == "recipientId"){  
				$("#recipientId").val(param[1]) 
				recipID = param[1];
			}  
		}
		if (recipID !== '') {
			$("#div" + recipID).show();
			$("#" + recipID).addClass("active");
			$("#" + recipID).parent("div").addClass("active");
		}
	});
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Tom BeckCommented:
Just to follow up on Ray's comment, here are the instructions for changing the default doctype to HTML5 in Dreamweaver.

http://www.dummies.com/how-to/content/dreamweaver-cs6-welcome-screen-and-default-setting.html
0
smfmetro10Author Commented:
Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.