Solved

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

Posted on 2014-09-11
8
131 Views
Last Modified: 2014-09-16
Hi,

I have a function that works but I need to have the tab be active when the url has a parameter on it.  I have a  variable called "recipientId" and based on what that variable is should highlight the various divs and <a >.

Also if there is no "recipientId" in the variable then it should default to 6 and highlight the <a id="6"> link

Here is the code:

<script>
$(document).ready(function() { 
    $("div a").click(function() {
        $("#ForMembers,#Coverage,#GenInfo").removeClass("active")
        $(this).closest("div").addClass("active")
        var v = $(this).attr("id");
        $("#recipientId").val(v);
    });
});
</script>
<script>
	$(document).ready(function () {	
			    $("div a:not(.button)").click(function () {
			$("#ForMembers,#Coverage,#GenInfo").removeClass("active");
			$("#ForMembers a,#Coverage a,#GenInfo a").removeClass("active");
			$(this).closest("div a").addClass("active");
			$(this).closest("div").addClass("active");

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

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

		
			var 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 ();
			}	
		
	
			$('.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
Comment
Question by:smfmetro10
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
8 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40318207
you're almost done

		if (recipID !== '') {
			$("#div" + recipID).show();
			$("#" + recipID).addClass("active");// do you mean that does'nt work
			$("#" + recipID).parent("div").addClass("active");// do you mean that does'nt work
		}
else {
   			$("#div6").show();
 			$("#6").addClass("active"); // please not 6 is not a valid id
			$("#6").parent("div").addClass("active"); // please not 6 is not a valid id
}

Open in new window

0
 

Author Comment

by:smfmetro10
ID: 40318343
Its close! The problem is that it makes the <a> always active based on the parameter..

For example if the url is ..."?recipientId=7" then the <a id="7" will always be in the active state even when you click on the other links.

( I will change the names so the Id's don't start with a number)
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40318380
$(".active").removeClass("active"); // add this to remove the previous active
if (recipID !== '') {
0
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 

Author Comment

by:smfmetro10
ID: 40323749
Its not quite right. The active state is not being triggered and depending on the parameter it makes one of the links constantly active

http://thelocalized.com/dc/
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40323878
I see lot of yoru code playing with active class onclick, remove it and use the one instead
0
 

Author Comment

by:smfmetro10
ID: 40323955
hmm... I can't get it to work... The  General Info tab keeps getting highlighted regardless of what link you click.
0
 

Author Comment

by:smfmetro10
ID: 40326402
its really close!

It works but when you click on a different link the div and <a> link are not being highlighted.

Any thoughts?

http://thelocalized.com/dc/?recipientId=5


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<script>
	$(document).ready(function () {	
			    $("div a:not(.button)").click(function () {			
			var v = $(this).attr("id");

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

		
			var 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 ();
			}
			$("div.active").removeClass("active"); 
			$("div a.active").removeClass("active"); 
			$("div a.active").addclass("active");
			$("div.active").removeClass("active"); 
			if (recipID !== '') {
			$("#div" + recipID).show();
			$("#" + recipID).addClass("active");// do you mean that does'nt work
			$("#" + recipID).parent("div").addClass("active");// do you mean that does'nt work
		}
else {
   			$("#div6").show();
 			$("#6").addClass("active"); // please not 6 is not a valid id
			$("#6").parent("div").addClass("active"); // please not 6 is not a valid id
}
	
			$('.hide').click(function () {
				$('.label_copy').hide();
			});

		});
          $(".active").removeClass("active");
		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>


<style>
.greybackground {
	  background-color:#F3F3F3;
	width:630px;
	height:150px;
	-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
	}
	

	#ForMembers {
		background-image:url(images/rectangle-med-blue-with-shadow.png);
		background-repeat:no-repeat;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 10px 5px;
		width:170px;
		height:95px;	
		margin-left:220px;
		margin-top:-120px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;	
	}

	#ForMembers:hover {
	background-image:url(images/rectangle-med-blue-with-shadow_H.png);
	cursor:pointer;
	}

	#ForMembers a  {	
		font-family:Georgia, "Times New Roman", Times, serif;
		color:#FFFFFF;
		
		
	}
	
	#ForMembers a.active {
		color:#000;
	}

	#ForMembers.active {
		background-image:url(images/rectangle-dark-blue-with-shadow_B.png);
		
	}

	#ForMembers a:hover  {
		color:#000;
	}	
	
	#Coverage {
		background-image:url(images/rectangle-med-blue-with-shadow.png);
		background-repeat:no-repeat;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 10px 5px;
		width:170px;
		height:95px;	
		margin-left:420px;
		margin-top:-115px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;	
	}

	#Coverage:hover {
	background-image:url(images/rectangle-med-blue-with-shadow_H.png);
	cursor:pointer;
	}

	#Coverage a  {	
		font-family:Georgia, "Times New Roman", Times, serif;
		color:#FFFFFF;
		
		
	}
	
	#Coverage a.active {
		color:#000;
	}

	#Coverage.active {
		background-image:url(images/rectangle-dark-blue-with-shadow_B.png);
	}

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

	#GenInfo {
		background-image:url(images/rectangle-med-blue-with-shadow.png);
		background-repeat:no-repeat;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 20px 5px;
		padding-top:10px;
		width:170px;
		height:90px;
		font-size:14px;
		margin-left:15px;
		margin-top:0px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;	
	}
	
	#GenInfo:hover {
		background-image:url(images/rectangle-med-blue-with-shadow_H.png);
		cursor:pointer;
	}	
	#GenInfo a  {
		
		font-family:Georgia, "Times New Roman", Times, serif;
		color:#FFFFFF;
		
	}

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

	#GenInfo.active {
		background-image:url(images/rectangle-dark-blue-with-shadow_B.png);
	}

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

	
	
	.label_copy {
		display:none;
	}
	#contactForm {
	width:610px;
	background-color:#F3F3F3;
	
	padding-left:20px;
	-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
	}
</style>

		
		<!--$if recipientId == 1-->
			<!--$tdcPageTitle = "Contact Form | Website Feedback"-->
			<!--$tdcLabel = "Web Site Feedback"-->
			<!--$tdcSubject="Web site feedback from www.thedoctors.com"-->
			<!--$tdcCopy="Please tell us about your experience on our Web site."-->
		<!--$elseif recipientId == 6-->
			<!--$tdcPageTitle = "Contact Form | General Information"-->
			<!--$tdcLabel = "General Information"-->
			<!--$tdcSubject="General Information Inquiry from www.thedoctors.com"-->
			<!--$tdcCopy="185 Greenwood Road Napa, CA 94558 (800) 421-2368."-->
		<!--$elseif recipientId == 7-->
		<!--$tdcHighLight = "Member"-->
			<!--$tdcPageTitle = "Contact Form | Member Services"-->
			<!--$tdcLabel = "Member Services"-->
			<!--$tdcSubject="Member Services Inquiry from www.thedoctors.com"-->
			<!--$tdcCopy="Members of The Doctors Company can contact our Member Service Department to receive assistance with policy, billing, or other member service issues by completing the form below or by calling (800) 421-2368."-->
			

		<!--$elseif recipientId == 8-->
			<!--$tdcPageTitle = "Contact Form | Patient Safety"-->
			<!--$tdcLabel = "Patient Safety"-->
			<!--$tdcSubject="Patient Safety Inquiry from www.thedoctors.com"-->
			<!--$tdcCopy="A patient safety/risk manager is always available to provide industry-leading expertise including custom programs, site surveys, crisis intervention, and education. To reach a patient safety/risk manager at The Doctors Company, please complete the form below or call (800) 421-2368 ext. 1243."-->
		<!--$elseif recipientId == 10-->
			<!--$tdcPageTitle = "Press Contacts"-->
			<!--$tdcLabel = "Press Contacts"-->
			<!--$tdcSubject="Press Inquiry from www.thedoctors.com"-->
			<!--$tdcCopy="Members of the media can reach a representative or spokesperson for The Doctors Company by completing the form below."-->
		<!--$elseif recipientId == 11-->
			<!--$tdcPageTitle = "Contact Form | Agents and Brokers"-->
			<!--$tdcLabel = "Agents and Brokers"-->
			<!--$tdcSubject="Agents and Brokers Inquiry from www.thedoctors.com"-->
			<!--$tdcCopy="Agents and brokers needing assistance with inquiries or utilizing the tools and publications provided in our online agent and broker area can receive assistance by completing the form below."-->
		<!--$elseif recipientId == 12-->
			<!--$tdcPageTitle = "Contact Form | OHIC"-->
			<!--$tdcLabel = "OHIC"-->
			<!--$tdcSubject="OHIC Inquiry from www.thedoctors.com"-->
			<!--$tdcCopy="For general information inquiries, please complete the form below or call us at<br>(800) 666-6442."-->
		<!--$elseif recipientId == 15-->
			<!--$tdcPageTitle = "Contact Form | SCPIE"-->
			<!--$tdcLabel = "SCPIE Insurance"-->
			<!--$tdcSubject = "SCPIE Inquiry from www.thedoctors.com"-->
			<!--$tdcCopy = "The SCPIE team of insurance professionals is here to assist you. We are<br>committed to responding to your inquiries as soon as possible during our core business hours&#8212;8:00 AM to 4:30 PM, Pacific Time."-->
		<!--$elseif recipientId == 16-->
			<!--$tdcPageTitle = "Contact Form | Northwest"-->
			<!--$tdcLabel = "Northwest Physicians Insurance Company"-->
			<!--$tdcSubject="Northwest Inquiry from www.thedoctors.com"-->
			<!--$tdcCopy="The Northwest team of insurance professionals is here to assist you. We are committed to responding to your inquiries as soon as possible during our core business hours&#8212;8:00 AM to 5:00 PM Pacific Time."-->
		<!--$endif-->
	
	<!--$else-->
	
	<!--$endif-->
	
	<!--$if formSubmitted-->
			<title>The Doctors Company | Confirmation</title>
		<!--$else-->
			<title>The Doctors Company | <!--$tdcPageTitle--></title>
			<script language="JavaScript" type="text/javascript">
			function submitPage(){
				var SS= Spry.Widget.Form.validate(document.contactForm);
				document.forms["contactForm"].hdn_formaction.value="Submitted";
				document.forms["contactForm"].action="<!--$HttpCgiPath-->";
				if(SS==true){
				document.contactForm.submit();
				}
				//document.forms["contactForm"].submit()
				}
			</script>
			
			<style type="text/css">
			select	{
				font-size: 14px;
			}
			.truecaps {
				font-variant: small-caps;
				}
			fieldset	{
				margin-bottom:1em;
				padding-left:5px;
				border: 0px;
				border-top: 6px solid #5b6d82;
				border-bottom: 6px solid #5b6d82;
				background-color: #eceae9;
			}
			fieldset div {
				margin:0.5em 0;
			}
			legend	{
				display:none;
			}
			label	{
				line-height:20px;
				color:#565656;
			}
			.required	{
				color: #b41e1b;
			}
			input.text	{
				font-size: 11px;
    			/*height: 18px;*/
    			line-height: 11px;
    			margin-left: 0;
    			vertical-align: top;
    			width: 200px;
			}
			textarea {
				border: 1px solid #CCC; FONT-SIZE: 11px; MARGIN-LEFT: 0px; VERTICAL-ALIGN: top; WIDTH: 268px; LINE-HEIGHT: 11px; HEIGHT: 80px;
			}
			
			</style>


</head>

<body>

<div class="greybackground">
	<br/>
	<div id="GenInfo" >

		<span style="font-size:18px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">General Information</span><br/>
	
		<a id="6" href="#6" onClick="return false;" class="link" style="font-color:#F00;">Contact us by email</a>
	
	</div>
		<div id="ForMembers" >
	
		<span style="font-size:18px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Members</span><br/>
	
		<a id="1" href="#1" onClick="return false;" class="link">Report a Claim</a><br/>
		<a id="7" href="#7" onClick="return false;" class="link">Member Services </a><br/>
		<a id="8" href="#8" onClick="return false;" class="link">Patient Safety </a>

	</div>

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

		<a id="3" href="#3" onClick="return false;" class="link">Get a Quote</a><br/>
		<a id="4" href="#4" onClick="return false;" class="link">Apply for Coverage</a><br/>
		<a id="5" href="#5" onClick="return false;" class="link">Find an Agent</a>
	
	</div>
	
	</div>

	<div id="div1" class="label_copy">
<p>claims specialist</p>
	</div>

	<div id="div7" class="label_copy">
<p>Members</p>
	</div>

	<div id="div8" class="label_copy">
	<p>A patient safety/risk manager</p>
	</div>

	<div id="div3" class="label_copy">
		<p>Complete our simple form </p>
	</div>

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

	<div id="div5" class="label_copy">
	<p>Apply for coverage</p>
	</div>

	<div id="div6" class="label_copy">
		<p>For general information</p>
	</div>
	<br/>
	                          

         <form id="contactForm" name="contactForm" method="post" encType="multipart/form-data" />
        <input type="hidden" value="WCM_SEND_FORM_EMAIL" name="IdcService" />
        <input type="hidden" value="WCM_EMAIL_CONTACT_TDC" name="tdcDynInclude" />
        <input type="hidden" value="<!--$ssServerRelativeSiteRoot-->ContactUs/Form/index.htm?formSubmitted=1" name="RedirectUrl">
        
        </form>

Open in new window

0
 

Author Closing Comment

by:smfmetro10
ID: 40326785
Thanks! it was right in front of me!
0

Featured Post

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
ASP.NET - Why is accordion not working? 3 50
Jquery 7 34
Html split(text) Part2 6 25
How do I add counter to html listbox using jquery 2 26
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

730 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