在我的网站上有一个导航栏,当我点击导航链接时,它需要转到另一个我本地存储在USB上的文件。
我该怎么做?
例如:
家
关于
趣事
接触
假设有人想点击“关于”。如何将usb连接到“关于”页面(单独的html文件)?
最佳答案
您需要为导航栏创建一个主容器,并为链接使用<a>
标记。根据当前存储文件的方式,必须适当设置链接的href
属性。
例如:
<html>
<body>
<ul class="navbar">
<li class="nav-item">
<a href="home.html">Home</a>
</li>
<li class="nav-item">
<a href="about.html">About</a>
</li>
...
</ul>
</body>
</html>
在这个例子中,我使用
<ul>
元素作为容器,因为它是一个导航项列表。您也可以选择使用<div>
。对于每个子项,我将其包装成一个
<li>
列表项。在每个项目上,我使用前面提到的<a>
标记。这些是实际创建链接的HTML标记。
href
标记的<a>
属性告诉浏览器当用户单击链接时要去哪里。例子
假设您在
home.html
页面上。在本例中,“About”链接告诉浏览器转到当前(
about.html
)页所在目录中的home.html
页。如果“about.html”文件存储在其他地方,则可以:
使用
..
引用父目录(包含当前目录的目录),如../about.html
这意味着在about.html
所在文件夹的上方找到home.html
页。使用
subdir/
引用子目录(与当前文件位于同一位置的目录),如pages/about.html
这意味着在与当前文件位于同一目录的about.html
文件夹中找到pages
页。使用
/
引用网页的根目录。这通常附加到域名,但与本地计算机上的文件(通过file://
访问)无关。根据您的浏览器和安全设置,您可能可以使用类似于file://path/to/about.html
的绝对路径,但出于安全原因,我认为这在大多数现代浏览器中不起作用。更多示例
网页/
主页.html
关于.html
有趣的/
功能事实.html
联系人.html
如果您在
home.html
、about.html
或contact.html
,您可以使用:<a href="home.html">Home</a>
<a href="about.html">Home</a>
<a href="fun/funfacts.html">Home</a>
<a href="contact.html">Home</a>
如果您在
funfacts.html
中,您将使用:<a href="../home.html">Home</a>
<a href="../about.html">Home</a>
<a href="funfacts.html">Home</a>
<a href="../contact.html">Home</a>
关于html - 创建带有本地HTML文件链接的导航栏,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34146757/