html+css+javacript怎么实现点击左侧导航栏右边界面显示不同的界面
时间: 2024-02-02 07:05:12 浏览: 45
实现点击左侧导航栏右边界面显示不同的界面,可以使用JavaScript来实现。具体步骤如下:
1. HTML结构:创建左侧导航栏和右边显示区域的HTML结构,为每个导航栏选项添加一个id属性。
```
<div class="sidebar">
<ul>
<li id="option1">选项1</li>
<li id="option2">选项2</li>
<li id="option3">选项3</li>
</ul>
</div>
<div class="content">
<div id="showOption1">选项1的内容</div>
<div id="showOption2">选项2的内容</div>
<div id="showOption3">选项3的内容</div>
</div>
```
2. CSS样式:设置左侧导航栏和右边显示区域的样式。
```
.sidebar {
float: left;
width: 200px;
height: 100%;
background-color: #f5f5f5;
}
.content {
float: left;
width: calc(100% - 200px);
height: 100%;
background-color: #fff;
}
```
3. JavaScript代码:为左侧导航栏选项添加点击事件,并在点击事件中显示对应的内容。
```
// 获取左侧导航栏选项和右边显示区域的DOM元素
var option1 = document.getElementById("option1");
var option2 = document.getElementById("option2");
var option3 = document.getElementById("option3");
var showOption1 = document.getElementById("showOption1");
var showOption2 = document.getElementById("showOption2");
var showOption3 = document.getElementById("showOption3");
// 为左侧导航栏选项添加点击事件
option1.onclick = function() {
showOption1.style.display = "block";
showOption2.style.display = "none";
showOption3.style.display = "none";
}
option2.onclick = function() {
showOption1.style.display = "none";
showOption2.style.display = "block";
showOption3.style.display = "none";
}
option3.onclick = function() {
showOption1.style.display = "none";
showOption2.style.display = "none";
showOption3.style.display = "block";
}
```
以上代码中,通过获取左侧导航栏选项和右边显示区域的DOM元素,并为左侧导航栏选项添加点击事件,在点击事件中根据选项的id属性来判断应该显示哪个内容。具体来说,当点击选项1时,将showOption1显示出来,将showOption2和showOption3隐藏;当点击选项2时,将showOption2显示出来,将showOption1和showOption3隐藏;当点击选项3时,将showOption3显示出来,将showOption1和showOption2隐藏。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)