Member Avatar for peter20

Hi , I want to make a script in jquery when I click on a link to appear
a message.

My code is below

<fieldset class="fild3">
              <legend>links</legend>
              <a href="" id="ca_125">CA-125</a><br>
              <a href="" id="ca_153">CA 15-3</a>
              </fieldset>

 <fieldset class="fild2">
                <legend>info</legend>
					
                  <span id="ca_125" class="ca_125">
                  <p>CA-125 </p>
                  </span>   
                  	
                  <span id="ca_153" class="ca_153">
                  <p>CA 15-3 </p>
                  </span>  
 </fieldset>

<script type="text/javascript">
$(document).ready(function () 
{
  $("span.ca_153").hide();

   $("a#ca_125").click(function() 
   {
              $("span.ca_125").show();
	      $("span.ca_153").hide();
   });
   
    $("a#ca_153").click(function() 
   {
              $("span.ca_153").show();
              $("span.ca_125").hide();
   });
   
	 
});
</script>

Because I have a lot of links can I do it somehow more dynamically.
I mean span name to take it from anchor id and to print text like
<?php echo array; ?>

Thanks a lot

  • 2 Contributors
  • 4 Replies
  • 146 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by peter20
Member Avatar for stbuchok

This is an example of what I think you might be looking for:

<html>

<head>

<script src="jquery-1.6.4.min.js"></script>


<script>

$(function(){
	$('a').click(function(){
		$('#message').html($(this).attr('data-message'));
	});
});

</script>

<style>

a{cursor: pointer;}

</style>

</head>

<body>

<ul>
	<li>
		<a data-message="Message for link 1">Link 1</a>
	</li>
	<li>
		<a data-message="Message for link 2">Link 2</a>
	</li>
	<li>
		<a data-message="Message for link 3">Link 3</a>
	</li>
	<li>
		<a data-message="Message for link 4">Link 4</a>
	</li>
	<li>
		<a data-message="Message for link 5">Link 5</a>
	</li>
</ul>

<span id="message"></span>

</body>

</html>

Hope it helps.

Member Avatar for peter20

This is an example of what I think you might be looking for:

<html>

<head>

<script src="jquery-1.6.4.min.js"></script>


<script>

$(function(){
	$('a').click(function(){
		$('#message').html($(this).attr('data-message'));
	});
});

</script>

<style>

a{cursor: pointer;}

</style>

</head>

<body>

<ul>
	<li>
		<a data-message="Message for link 1">Link 1</a>
	</li>
	<li>
		<a data-message="Message for link 2">Link 2</a>
	</li>
	<li>
		<a data-message="Message for link 3">Link 3</a>
	</li>
	<li>
		<a data-message="Message for link 4">Link 4</a>
	</li>
	<li>
		<a data-message="Message for link 5">Link 5</a>
	</li>
</ul>

<span id="message"></span>

</body>

</html>

Hope it helps.

Unfortunately something I do wrong

Member Avatar for stbuchok

Unfortunately something I do wrong

Can you explain?

Member Avatar for peter20

Can you explain?

I changed lib <script type="text/javascript" src="js/jquery-1.7.1.js></script>
and it works fine !
Thanks a lot

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.