How to open particular menu div in a new tab

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>

To be able to open a div in a new tab, you should create its own page like you would call it `show-3.html`, put in it the content of you div, and call it onclick on the proper menu. — Anwar, Mar 02 '15 at 08:07
Cann't we achieve this through single page website. As per requirement i'm supposed to develop using single page only. — Vijaya Savant, Mar 02 '15 at 08:31

score 1 · Answer 1 · answered Mar 02 '15 at 08:10

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>

score 0 · Answer 2 · answered Mar 02 '15 at 08:09

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.

score 0 · Answer 3 · answered Mar 02 '15 at 08:12

0

Please Try this fiddle Demo

Just make minor change in your a tag

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

answered Mar 02 '15 at 08:12

priya786

1,804
12
11

Actually my requirement is, I'm using one page template. If I click on particular menu then it open its related div content over there, but when i right click on link and open in new tab it gives index page of my site (like www.mysite.com/#) instead it should display www.mysite.com/index.html #menu-2 content..... Now what to do?.. – Vijaya Savant Mar 02 '15 at 08:26

score 0 · Answer 4 · answered Mar 02 '15 at 08:12

0

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.

answered Mar 02 '15 at 08:12

Shreejibawa

1,860
1
25
35

I tried your suggestion but its not working...actually I'm using ready made template. – Vijaya Savant Mar 02 '15 at 08:21

score 0 · Answer 5 · edited May 23 '17 at 12:06

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.

How to open particular menu div in a new tab

5 Answers5