• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 128
  • Last Modified:

how do you use a link with no href="#"

Hi,

I have some code that works but it uses an href="#" which moves the page to the corresponding link.

Is it possible to have the same functionality but with the anchor tag so the page doesnt move?

Thanks,
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);

		
			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>


<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;
	}

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


<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" class="link show" style="font-size:12px;">Report</a><br/>
		<a id="7" href="#7" class="link show" style="font-size:12px;">Member </a><br/>
		<a id="8" href="#8" 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" class="link show" style="font-size:12px;">Get a Quote</a><br/>
		<a id="4" href="#4" class="link show" style="font-size:12px;">Apply for Coverage</a><br/>
		<a id="5" href="#5" 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" 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>

Open in new window

0
smfmetro10
Asked:
smfmetro10
1 Solution
 
GaryCommented:
Just remove the href
If you need the active, hover states etc then add onclick="return false;"
0
 
Brad GrouxSenior Manager (Wintel Engineering)Commented:
If you have an a href set to an address of # without a corresponding anchor tag - a click does nothing.

Example:
<a href="#">Click Here to do Nothing</a>

Open in new window

The # is commonly used in mockups.
0
 
leakim971PluritechnicianCommented:
href="javascript:void(0)"
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
smfmetro10Author Commented:
I removed the href and added onclick="return false;"  this is an example of one of them
      
<a id="1" onClick="return false;"class="link show" style="font-size:12px;">Report</a>

Open in new window


The active states work but the corresponding divs don't show up.

would this be the culprit?

	if (recipID !== '') {
			$("#div" + recipID).show();
			$("#" + recipID).addClass("active");
			$("#" + recipID).parent("div").addClass("active");

Open in new window

0
 
GaryCommented:
Put the href back but keep the onclick
0
 
smfmetro10Author Commented:
Thanks!
0
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.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now