CODEWITHSUNDEEP
javascriptjqueryhtml
Vijaya Savant
Vijaya Savant

Reputation: 135

How to open particular menu div in a new tab

I have created a one page website. When i click on menu it go to particular div tag. When I right click on menu & click on 'open in new tab' it opens url "www.mysite.com/#" instead it should open "www.mysite.com/#show-3".

Please help me with this......soon

/**************Script used to open Different menu div on page*********************/
	$(".menu a").click(function(){
		var id =  $(this).attr('class');
		id = id.split('-');
		$("#menu-container .content").hide();
		$("#menu-container #menu-"+id[1]).addClass("animated fadeInDown").show();
		return false;
	});
<div class="menu-wrapper">
  <ul class="menu">
    <li><a class="show-1" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">About Us</a></li>                            							
	<li><a class="show-2" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Rooms</a></li>
	<li><a class="show-3" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Reservation</a></li>
	<li><a class="show-4" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Gallery</a></li>  
    <li><a class="show-5" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Contact Us</a></li> 
  </ul> <!-- /.menu -->
</div>

Upvotes: 0

Views: 2458

Answers (5)

Kiong
Kiong

Reputation: 824

The thing about what you are trying to do is that, if you want to open just that particular div in a new web page, it isn't a 1 page site anymore. It is a NEW page with that div content.

Regarding your code, the

... href="your new page link here"

that " # " of yours is the link (or in a more technical term, it will append that link to your base url on your current page. Which resulted on it going to "www.mysite.com/#" The reason why it shows the same page instead of just a new page is simply because # is not to link to a new page but to an element in your current page on any event (such as an onclick). You can get more details on that here

But like the other answers had mentioned, if you want to open a new tab (aka page), you have to have another page. Which also means this will no longer be a 1 page website.

Upvotes: 0

Shreejibawa
Shreejibawa

Reputation: 1868

You can give divs id:

<div id="show-1">About Us Content</div>

And create hyperlinks like:

<a class="show-1" target="_blank" href="yourPage.html#show-1">About Us</a></li>

This will open your div directly in new tab.

Upvotes: 0

priya786
priya786

Reputation: 1834

Please Try this fiddle Demo

Just make minor change in your a tag

<a href="#" target="_blank">

Upvotes: 0

Lafontein
Lafontein

Reputation: 240

This will work

<a target="_blank" href="yourlink">Link</a>

In your case

<div class="menu-wrapper">
  <ul class="menu">
    <li><a target="_blank" class="show-1" href="#">About Us</a></li>                            		<li><a target="_blank" class="show-2" href="#">Rooms</a></li>
	<li><a target="_blank" class="show-3" href="#">Reservation</a></li>
	<li><a target="_blank" class="show-4" href="#">Gallery</a></li>                            
    <li><a target="_blank" class="show-5" href="#">Contact Us</a></li> 
  </ul> <!-- /.menu -->
</div>

Upvotes: 1

Will Reese
Will Reese

Reputation: 2841

The "open in new tab" button in most browsers will follow standard hyperlink rules, meaning that they will open the href of the tag. A one page site usually manages all it's content with javascript and dynamic html generation. The open in new tab function doesn't know how to handle this.

What you are going to have to do is write routing and html generation logic, give all of your links actual href attributes, not just hashtags. For normal page navigation, you can return false whenever a user clicks on a link so that you can perform your normal one page logic, but when someone forces the browser to navigate to the href location (as in opening in a new tab), you will have an actual page with your div displayed there.

Upvotes: 0

Related Questions