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

    
 


    

        

            

                
11
                
22
                
33
            
        
        

        
        
    

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

大概逻辑 就是建立一个首页，然后将页面分为左右两部分，左边负责切换，右侧负责页面展示，通过

标签的顺序号进行 页面切换，左边点击第三个，右边则显示第三个页面连接对应的页面，UI优化就不多做描述了

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

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

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

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

方法三

1. 首先，在HTML中创建一个左侧栏目和一个右侧区域的容器。可以使用 
    元素或者 

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

  

    

      
栏目1
      
栏目2
      
栏目3
    
  
  
  

    
内容1
    
内容2
    
内容3
  
   
  

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