网页设计,本页面内左侧菜单导航右侧显示内容简单实现方法

 <div class="sidebar1" align="center">


    <ul  class="nav">
      <li><a href="${pageContext.request.contextPath }/jsp/NewFile.jsp" target="test">首页</a></li>
      <li><a href="#menu2">基本信息</a></li>
      <li><a href="#menu3">休假记录</a></li>
      <li><a href="#menu4">加班记录</a></li>
      <li><a href="#menu5">资质记录</a></li>
      <li><a href="#menu6">合同记录</a></li>
    </ul>
    <!-- end .sidebar1 --></div>
   


  <div    class="content" >
  <iframe src="http://qq.com/" name="test" frameborder="no" class="Displayarea" ></iframe>


  <!-- end .content -->

    </div>

//

是一种简单实现,一个页面内的两个div,一个里面是菜单,一个里面放置iframe,实现了加入菜单链接后跳转到本页面的div里面

您可以使用HTML和CSS创建一个多层导航菜单,然后使用JavaScript来实现点击左侧导航栏时右侧显示对应页面的功能。 以下是一个基本的HTML结构: ``` <div class="menu"> <ul> <li><a href="#">First Level Item 1</a> <ul> <li><a href="#">Second Level Item 1</a></li> <li><a href="#">Second Level Item 2</a></li> <li><a href="#">Second Level Item 3</a></li> </ul> </li> <li><a href="#">First Level Item 2</a> <ul> <li><a href="#">Second Level Item 4</a></li> <li><a href="#">Second Level Item 5</a></li> </ul> </li> </ul> </div> <div class="content"> <div id="page1" class="page active">Page 1 Content</div> <div id="page2" class="page">Page 2 Content</div> <div id="page3" class="page">Page 3 Content</div> <div id="page4" class="page">Page 4 Content</div> <div id="page5" class="page">Page 5 Content</div> </div> ``` 在上面的HTML中,我们有一个具有多个层级的导航菜单和一个内容区域。导航菜单使用无序列表和嵌套的列表项来创建多个层级。内容区域包含多个页面,每个页面具有唯一的ID和类。 接下来,我们需要使用CSS为菜单内容区域创建样式。以下是一个示例CSS: ``` .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { position: relative; } .menu li ul { position: absolute; left: 100%; top: 0; display: none; } .menu li:hover > ul { display: block; } .content .page { display: none; } .content .active { display: block; } ``` 在上面的CSS中,我们使用了位置属性和伪类选择器来为菜单创建多层导航。我们还使用了display属性来控制内容区域中的页面的可见性。 最后,我们需要使用JavaScript来实现单击菜单项时显示对应页面的功能。以下是一个示例JavaScript: ``` var links = document.querySelectorAll(".menu a"); var pages = document.querySelectorAll(".page"); for (var i = 0; i < links.length; i++) { links[i].addEventListener("click", function(e) { e.preventDefault(); var href = this.getAttribute("href").replace("#", ""); for (var j = 0; j < pages.length; j++) { pages[j].classList.remove("active"); if (pages[j].getAttribute("id") === href) { pages[j].classList.add("active"); } } }); } ``` 在上面的JavaScript中,我们使用querySelectorAll()方法来获取所有菜单项和所有页面。我们使用循环和addEventListener()方法将单击事件添加到每个菜单项。当单击菜单项时,我们使用getAttribute()方法获取其href属性的值,并使用replace()方法删除#符号。然后,我们使用循环和classList属性来将active类添加到相应的页面,并从其他页面中删除它。 这样,当用户单击菜单项时,页面将会切换到相应的内容
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值