HTML实现点击左侧菜单，右侧内容切换

紫薯馍馍

已于 2023-12-20 14:05:18 修改

阅读量5.6k

点赞数 16

文章标签： html 前端

于 2023-12-19 10:17:04 首次发布

本文链接：https://blog.csdn.net/u012972294/article/details/135078173

版权

<html>

<head>
    <style>
        .main_left{
    width: 150px;
	height: 100%;
	float:left;
	background:#c0c0c0;
	cursor:pointer;
}

    </style>
 
</head>
<body >
    <div class="iframe">
        <div class="main_left" style="height: 100%">
            <ul>
                <li data-src="a.html">11</li>
                <li data-src="b.html">22</li>
                <li data-src="c.html">33</li>
            </ul>
        </div>
        <div class="main_right">
        <iframe frameborder="0" scrolling="yes" style="width: 80%;height: 100%;" src="a.html" id="aa"></iframe>
        </div>
    </div>
</body>

<script type="text/javascript">
    let items = document.getElementsByTagName("li");
	for(let i=0; i<items.length; i++) {
		items[i].onclick = function (){
			let src = items[i].getAttribute("data-src")
			document.getElementById("aa").setAttribute("src", src)
		}
	}
 
</script>

</html>

完整代码如上，当前页面为index.html ，需要另外建三个测试页面a.html、b.html、c.html

大概逻辑就是建立一个首页，然后将页面分为左右两部分，左边负责切换，右侧负责页面展示，通过<li>标签的顺序号进行页面切换，左边点击第三个，右边则显示第三个页面连接对应的页面，UI优化就不多做描述了

方法一更适用于多个网页存在切换的场景，像只有一些内容、功能、类型需要切换的时候，单独创建网页就有点笨重了。

方法二则是适用于这种场景，利用js来处理：

方法二逻辑是利用多个div区域进行轮动切换，举个例子，左侧有五个需要切换，我只需要展现其中一个，隐藏其余四个就实现效果了，代码如下，默认其余区域是隐藏的，

当我点击其他分类时，js就回去获取，点击分类的id，然后进行页面上div的隐藏和显示，js代码如下：

           <script>
                document.querySelectorAll('li').forEach(function(a) {
                    a.addEventListener('click', function(e) {
                        e.preventDefault();   
                        console.log(this.id);

                        if(this.id=="_mtgj")
                        {
                            document.getElementById("txcl").style.display="none";
                            document.getElementById("mtgj").style.display="block";
                        }

                    });
                    }); 
            </script>

方法三

首先，在HTML中创建一个左侧栏目和一个右侧区域的容器。可以使用 <div> 元素或者 <ul> 和 <li> 元素来创建栏目列表。
接下来，使用CSS样式来给容器和元素添加样式。可以使用布局方式来将左侧栏目和右侧内容区域分割开，并设置一些样式来美化界面。
然后，使用JavaScript来添加事件监听器，当栏目被点击时，切换对应的内容区域。


<html>

<head>
<style>
.container {
  display: flex;
}

.sidebar {
  width: 200px;
  background-color: lightgray;
}

.content {
  flex: 1;
  background-color: white;
}

.menu-item {
  cursor: pointer;
}

.item {
  display: none;
}

.item.active {
  display: block;
}

</style>

</head>
<body>
<div class="container">
  <div class="sidebar">
    <ul>
      <li class="menu-item">栏目1</li>
      <li class="menu-item">栏目2</li>
      <li class="menu-item">栏目3</li>
    </ul>
  </div>
  
  <div class="content">
    <div class="item" id="item1">内容1</div>
    <div class="item" id="item2">内容2</div>
    <div class="item" id="item3">内容3</div>
  </div>
   
  
<script>
    const menuItems = document.querySelectorAll('.menu-item');
    const items = document.querySelectorAll('.item');
    
    menuItems.forEach(function(item, index) {
      item.addEventListener('click', function() {
        // 移除所有栏目的 active 类
        menuItems.forEach(function(item) {
          item.classList.remove('active');
        });
        // 移除所有内容区域的 active 类
        items.forEach(function(item) {
          item.classList.remove('active');
        });
        // 给被点击的栏目添加 active 类
        item.classList.add('active');
        // 显示对应的内容区域
        items[index].classList.add('active');
      });
    });
    
    
    </script>
</body>


</html>

试试看，第三种方法非常方便

紫薯馍馍

关注

16
点赞
踩
67

收藏

觉得还不错? 一键收藏
2
评论
HTML实现点击左侧菜单，右侧内容切换

大概逻辑就是建立一个首页，然后将页面分为左右两部分，左边负责切换，右侧负责页面展示，通过标签的顺序号进行页面切换，左边点击第三个，右边则显示第三个页面连接对应的页面，UI优化就不多做描述了。完整代码如上，当前页面为index.html ，需要另外建三个测试页面a.html、b.html、c.html。
复制链接

扫一扫