How do i link?

[jemz]

Hi i just want to ask some help with you,...I have 2 divs, left and right,the left side div contains 3 links
example

Link 1
Link 2
Link 3

what i want, if i want to click each links inside the div which is menu it will display the content on the right side div,which is my div content.

can you help me please how can i achieve on this.Thank you in advance

<div id="menu">
    	
									<ul>
									 <li class="header">My Menu</li>
									 <li><a href="Link1.php"><span>Link 1<span></a></li>
									  <li><a href="Link2.php"><span>Link 2<span></a></li>
									  <li><a href="Link3.php"><span>Link 3<span></a></li>
									  
									</ul>
								
</div>


<div id="content">
    Display Here
   
</div>

[paul_wilkins]

Hi i just want to ask some help with you,...I have 2 divs, left and right,the left side div contains 3 links
example

Link 1
Link 2
Link 3

what i want, if i want to click each links inside the div which is menu it will display the content on the right side div,which is my div content.

Have the separate content in divs each with an identifier, all within the content div, and link the links to each of those divs.

<li><a href="#content1"><span>Link 1<span></a></li>
<li><a href="#content2"><span>Link 2<span></a></li>
<li><a href="#content3"><span>Link 3<span></a></li>
...
<div id="content">
    <div id="content1">...</div>
    <div id="content2">...</div>
    <div id="content3">...</div>
</div>

That way the links still get you down to the appropriate content when scripting isn't there.

Then, assign an onclick event to the menu which triggers a function which hides each of the content sections, and then shows the one that the link links to.
You can also then run that function when the page starts to hide all of the content.

[jemz]

Have the separate content in divs each with an identifier, all within the content div, and link the links to each of those divs.

<li><a href="#content1"><span>Link 1<span></a></li>
<li><a href="#content2"><span>Link 2<span></a></li>
<li><a href="#content3"><span>Link 3<span></a></li>
...
<div id="content">
    <div id="content1">...</div>
    <div id="content2">...</div>
    <div id="content3">...</div>
</div>

That way the links still get you down to the appropriate content when scripting isn't there.

Then, assign an onclick event to the menu which triggers a function which hides each of the content sections, and then shows the one that the link links to.
You can also then run that function when the page starts to hide all of the content.

Hi,Thank you for the reply,ahm I mean to do this in jquery?I do apologize i am not good in this language i am still learning.I hope you can help me.
I want that when i clicked the Link1 which is Link1.php this will load to my Div Content which is on the right side.Thank you in advance

[paul_wilkins]

Hi,Thank you for the reply,ahm I mean to do this in jquery?I do apologize i am not good in this language i am still learning.

I hope that you don't want me to write the code for you. I can of course though help in other ways.

[jemz]

Yes i will not let you do that of course you must give me a chance to do this in my own,what i want is to ask some idea on how can i achieve this and please guide me so that i will not be lost.Thank you so much in advance.

[jemz]

I already include the jquery.js in the head seaction,but what should i use the function in jquery?

[paul_wilkins]

Yes i will not let you do that of course you must give me a chance to do this in my own,what i want is to ask some idea on how can i achieve this and please guide me so that i will not be lost.Thank you so much in advance.

You can use jQuery's .on() method to listen for clicks on the links. The handler that you assign for that can then prevent the default behaviour of the link, after which you can use a selector to get all of the links, and then for each of the links you would use the href attribute to hide the div that the link points to.

When that's done, you can then show the link that was clicked.

Finally, you can also run that handler as a part of starting the page, so that the divs get hidden when the page loads.

[jemz]

You can use jQuery's .on() method to listen for clicks on the links. The handler that you assign for that can then prevent the default behaviour of the link, after which you can use a selector to get all of the links, and then for each of the links you would use the href attribute to hide the div that the link points to.

When that's done, you can then show the link that was clicked.

Finally, you can also run that handler as a part of starting the page, so that the divs get hidden when the page loads.

Okay thank you so much,Iwill try this and i will write back to you as soon as i can.

[jemz]

You can use jQuery's .on() method to listen for clicks on the links. The handler that you assign for that can then prevent the default behaviour of the link, after which you can use a selector to get all of the links, and then for each of the links you would use the href attribute to hide the div that the link points to.

When that's done, you can then show the link that was clicked.

Finally, you can also run that handler as a part of starting the page, so that the divs get hidden when the page loads.

Hi, i am trying to put some alert so that i can test when i am going to click the link if my code is working,but it failed to alert what is wrong with this?

<!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><title>Index</title>
 
	   <script type="text/javascript" src="jquery.js"></script>

	   <script type="text/javascript">
	
		$("div#menu").on("click","a",function()
		{
			alert("hello");
		});
	</script>

  </head>
  <body>
       <div id="menu">	
	      <ul>
	            <li class="header">My menu</li>
		    <li><a href="page1.php"><span>Search name<span></a></li>
	            <li><a href="page2.php"><span>Search fname<span></a></li>
	           <li><a href="page3.php"><span>Search lname<span></a></li>
                 
	     </ul>							
</div>	


<div id="content">


</div>

</body>

</html>

[jemz]

You can use jQuery's .on() method to listen for clicks on the links. The handler that you assign for that can then prevent the default behaviour of the link, after which you can use a selector to get all of the links, and then for each of the links you would use the href attribute to hide the div that the link points to.

When that's done, you can then show the link that was clicked.

Finally, you can also run that handler as a part of starting the page, so that the divs get hidden when the page loads.

Hi, I am confuse of this and i don't understand what you mean by this
after which you can use a selector to get all of the links, and then for each of the links you would use the href attribute to hide the div that the link points to.



This is my code please help me on this. i get stuck

<!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><title>Index</title>
 
	   <script type="text/javascript" src="jquery.js"></script>

	   <script type="text/javascript">
	
		 $(function()
		{
		   $("div#menu").on("click","a",function(event)
		    {
			  event.preventDefault();
			   $("div#menu a").each(a.attr("href"))
			   {
			     
			   }
			})
		});
	</script>

  </head>
  <body>
       <div id="menu">	
	      <ul>
	            <li class="header">My menu</li>
		    <li><a href="page1.php"><span>Search name<span></a></li>
	            <li><a href="page2.php"><span>Search fname<span></a></li>
	           <li><a href="page3.php"><span>Search lname<span></a></li>
                 
	     </ul>							
</div>	


<div id="content">


</div>

</body>

</html>

[paul_wilkins]

This is my code please help me on this. i get stuck

Sure thing. The each method takes a function, and in that function the this keyword refers to each different element, in this case it's each anchor link in the menu.

Your HTML needs to be changed so that each link points to a different div. That way your function can get the href attribute from each link with $(this).attr('href') so that you can then use that reference to the div to hide it.

[jemz]

Your HTML needs to be changed so that each link points to a different div.

You mean to do the same in your post no#2?

[paul_wilkins]

You mean to do the same in your post no#2?

That's right. It's the best way to connect the link with the section that it's supposed to activate.

[jemz]

so that you can then use that reference to the div to hide it.

Why do i hide the div?i want to load the page in the Div with an id of content...example when i click the link "search name" in the menu list.the page1.php will load to the Div id="content".because the page1.php have textboxes and table,and this is something like displaying user profile...just like other links when i click the link fname the page2.php will load to the <div id="content"> and this will display also table and displaying the user fname,age.etc...

[paul_wilkins]

Why do i hide the div?

The main reason is for when you click on another link. You If link 2 is showing and you click on link 3, you don't want link 2 to still be showing. But when you click link 3 the code doesn't have an easy way to tell which one was already open. So the most effective standard procedure to deal with that is to hide all of the ones that the links point to, and to then show the one that was clicked.

[jemz]

The main reason is for when you click on another link. You If link 2 is showing and you click on link 3, you don't want link 2 to still be showing. But when you click link 3 the code doesn't have an easy way to tell which one was already open. So the most effective standard procedure to deal with that is to hide all of the ones that the links point to, and to then show the one that was clicked.

Hello , i am confuse on how to hide,is this correct? but it shows to my div content

<!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><title>Index</title>
 
	   <script type="text/javascript" src="jquery.js"></script>

	   <script type="text/javascript">
	
		 $(function()
		{
		   $("div#menu").on("click","a",function(event)
		    {
			  event.preventDefault();
			  $("div#content li").each(function(){
                            $(this).hide();
                         });
			})
		});
	</script>

  </head>
  <body>
       <div id="menu">	
	      <ul>
	            <li class="header">My menu</li>
		    <li><a href="page1.php"><span>Search name<span></a></li>
	            <li><a href="page2.php"><span>Search fname<span></a></li>
	           <li><a href="page3.php"><span>Search lname<span></a></li>
                 
	     </ul>							
</div>	


<div id="content">
  <a href="page1.php"><span>Search name</span></a>
 <a href="page2.php"><span>Search fname</span></a>
 <a href="page3.php"><span>Search lname</span></a>

</div>

</body>

</html>

[paul_wilkins]

Hello , i am confuse on how to hide,is this correct? but it shows to my div content

The different parts of your content need to be in separate identified divs.
Your links need to link to those identified divs.
Your script needs to go through each of the menu links (not the content ones) and use the link as a selector so that you can hide the target.
Your script also needs to use the link of the one that was clicked, to show the target of that link.

[jemz]

The different parts of your content need to be in separate identified divs.

<div id="menu">	
	      <ul>
	            <li class="header">My menu</li>
		    <li><a href="page1.php" id="content1"><span>Search name<span></a></li>
	            <li><a href="page2.php" id="content2"><span>Search fname<span></a></li>
	           <li><a href="page3.php" id="content3"><span>Search lname<span></a></li>
                 
	     </ul>							
</div>	


<div id="content">

     <div id="content1">
        <a href="page1.php"><span>Search name</span></a>
    </div>

    <div id="content2">
          <a href="page2.php"><span>Search fname</span></a>
   </div>

   <div id="content3">
        <a href="page3.php"><span>Search lname</span></a>
   </div>
</div>

Your script needs to go through each of the menu links (not the content ones)

<script type="text/javascript" src="jquery.js"></script>

	   <script type="text/javascript">
	
		 $(function()
		{
		   $("div#menu").on("click","a",function(event)
		    {
			  event.preventDefault();
			  $("div#menu a").each(function(){
                            $(this).hide();
                         });
			})
		});
	</script>

and use the link as a selector so that you can hide the target.
Your script also needs to use the link of the one that was clicked, to show the target of that link

I have no idea on this,can you please show me what you mean?

[paul_wilkins]

and use the link as a selector so that you can hide the target.
Your script also needs to use the link of the one that was clicked, to show the target of that link

I have no idea on this,can you please show me what you mean?

For the first one, see post #2

After you've done that, it's not $(this) that you need to hide (because $(this) is the link that was clicked on), but instead it is what the link is linking to instead that you need to hide. That's most easily achieved by using this.hash for the selector, which retrieves the fragment identifier from the link. An example of a fragment identifier is "#content2"

With showing the target of the link, after you've hidden the other ones you need to show the one that the clicked link refers to. So at the end of the function for the click event you will want to use the fragment identifier of the clicked link to show what the link is linking to.

[jemz]

For the first one, see post #2

if use like this

<li><a href="#content1"><span>Link 1<span></a></li>
<li><a href="#content2"><span>Link 2<span></a></li>
<li><a href="#content3"><span>Link 3<span></a></li>
...
<div id="content">
    <div id="content1">...</div>
    <div id="content2">...</div>
    <div id="content3">...</div>
</div>

how can i call my page1.php,page2.php and page3.php?

[paul_wilkins]

how can i call my page1.php,page2.php and page3.php?

How do you expect a link to trigger the display of content on the page, as well as link to some other location? Are you wanting one link to perform different behaviour at different times?

[jemz]

I do apologize i could not get you,what i want to perform is that every time when i click a link in my menu and that link is calling the page1.php or page2.php
hre="page1.php" or href="page2.php", this will load into the dive which id is content.

[paul_wilkins]

I do apologize i could not get you,what i want to perform is that every time when i click a link in my menu and that link is calling the page1.php or page2.php
hre="page1.php" or href="page2.php", this will load into the dive which id is content.

Ahh, well that's very different. You can use jQuery's .load() method for that.

[jemz]

by the way what is inside the div in your post #2?

div has 3 dotted,or what should i put in that dotted?

[jemz]

You can use jQuery's .load() method for that.

Sounds like that will work now for me.hehehe.

by the ways in you post no#2 how does it behave as i have thought it will load to the div?but you've said now that i will use the .load method?