Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

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

Avatar of smfmetro10
smfmetro10Flag for United States of America asked on
JavaScript
5 Comments1 Solution325 ViewsLast Modified:
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>
ASKER CERTIFIED SOLUTION
Avatar of Tom Beck
Commented:
This problem has been solved!
Unlock 1 Answer and 5 Comments.
See Answers