首页html a标签同一个行内点击切换不同的页面

html a标签同一个行内点击切换不同的页面

时间: 2023-08-30 20:11:04 浏览: 163

实现同一页面切换显示不同内容

实现在同一个页面内定义导航调后，点击导航在该页面内实现不同内容切换显示

可以使用a标签的href属性和id属性实现同一个行内点击切换不同的页面。具体步骤如下： 1. 在页面中设置多个不同的div元素，每个元素设置一个唯一的id属性值。 2. 在a标签中设置href属性值为#加上对应div元素的id属性值，例如href="#div1"。 3. 点击a标签时，页面会自动跳转到对应id属性值的div元素位置。示例代码如下： ``` <!DOCTYPE html> <html> <head> <title>同一个行内点击切换不同的页面</title> <style type="text/css"> .container { width: 100%; height: 500px; display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: 30px; color: #fff; } .page1 { background-color: #f00; } .page2 { background-color: #0f0; } .page3 { background-color: #00f; } </style> </head> <body> <a href="#page1">Page 1</a> <a href="#page2">Page 2</a> <a href="#page3">Page 3</a> <div id="page1" class="container page1"> Page 1 </div> <div id="page2" class="container page2"> Page 2 </div> <div id="page3" class="container page3"> Page 3 </div> </body> </html> ``` 在这个示例中，点击页面中的a标签时，会跳转到对应的div元素位置，并显示对应的内容。因为div元素设置了唯一的id属性值，所以可以通过href属性值加上#和id属性值来实现同一个行内点击切换不同的页面的效果。

阅读全文