简体   繁体   English

指向页面上特定区域的href外部链接

[英]a href external link to specific area on page

So I have a nav bar that I want to link to different pages that all look the same but have one different section on them. 因此,我有一个导航栏,我想链接到不同的页面,这些页面看起来都一样,但是有一个不同的部分。 When I came to creating the links I realized that it will only link to the other page but not the specific section on the page . 当我开始创建链接时,我意识到它只会链接到其他页面,而不会链接到页面的特定部分。 So basically I had the idea of an anchor tag but linking to another page. 所以基本上我有一个锚标签的想法,但链接到另一个页面。

I did it this way because I have a basic knowledge of coding and don't know how to use php and javascript. 我这样做是因为我具有编码的基本知识,并且不知道如何使用php和javascript。 Is there a way to do this with what I have? 有什么办法可以解决我现有的问题吗? Or do I have to try a different method entirely? 还是我必须完全尝试其他方法?

I am just learning javascript now so that can be an option. 我现在正在学习JavaScript,因此可以选择。 I heard you could do something with arrays? 我听说您可以对数组做些什么? (But not any jquery as we are not allowed to use that for our assignment) I've also heard about iframes also but I don't know too much about them. (但不是任何jquery,因为我们不允许将其用于我们的任务)我也听说过iframe,但我对它们知之甚少。

CODE: 码:

HTML 的HTML

 <nav>
    <ul>
    <li><a href="toursprices.html">TOURS,PRICES &amp; STANDARD FLIGHTS</a></li>
    <li><a href="#">MEET THE STAFF</a></li>
    <li><a href="#">CHARTERS</a></li>
    </ul>
</nav>

如果您的页面tourprices.html包含ID为“ abc”的div,并且您想要链接到该部分,则只需编写如下的href:

<a href="toursprices.html#abc">TOURS,PRICES &amp; STANDARD FLIGHTS</a>

You can use: 您可以使用:

<a id="different_section_1">Different Section</a>

in the target page and in the navbar use: 在目标页面和导航栏中使用:

<a href="page.html#different_section_1">Page</a>

But if your pages are essentially the same with one area that changes. 但是,如果您的页面在本质上是相同的,只是一个区域发生了变化。 You'd probably be better of using an iframe or switching out blocks with javascript. 您最好使用iframe或使用javascript切换块。

As "user3472089" said you can point the a certain element through its id. 正如“ user3472089”所说,您可以通过其ID指向某个元素。

I use this at the top of my gallery: 我在画廊顶部使用它:

<a href="#top"></a>

And at the bottom I just put a link or a simulated button that leads to that anchor: 在底部,我只是放置了一个链接或一个模拟按钮,该链接或链接指向该锚点:

<a href="#top">
    <div id="top_anchor">
      UP 
    </div>
</a>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM