如何在新选项卡中打开特定的菜单div

Question

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> 

Answer 1

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> 

Answer 2

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.

Answer 3

Please Try this fiddle Demo

Just make minor change in your a tag

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

Answer 4

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.

Answer 5

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.