网页目前效果及要实现的功能效果如下所示:(请在以下源码的基础上,修改完成所需效果。)网页源码如下:(请在以下源码的基础上,修改完成所需效果。)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
*
{
padding:0px;
margin:0px;
font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;
color:#666;
}.header
{
height:20px;
}.header a
{
color:#FF0;
}.header .menu li
{
float:left;
width:80px;
background-color:#900;
list-style-type:none;
}.content .sidebar
{
padding:12px;
width:7.3%;
height:600px;
float:left;
list-style-type:none;
}.content .open
{
float:left;
width:1px;
height:624px;
background-color:#E2E9EA;
}.main
{
float:left;
width:88.7%;
}.main .crumb
{
background-color:#999;
color:#FFF;
}
</style>
<title>后台首页</title>
<script type="text/javascript">
//这里写什么代码,来实现功能呢?
</script>
</head>
<body><!----------一级菜单栏---------->
以下是一个cms系统后台的主页面。请问下述常见功能如何实现:(最好是通过js代码。不要用jquery。)<br>
1、点击栏目一后,栏目一文字变色,同时左栏显示与栏目一相对应的内容。同时在当前位置处,显示当前所处的位置。<br>
2、栏目一下的左栏各内容显示出来后,点击各内容,在右侧可包含进来不同的php文件。<div class="header">
  <!--后台菜单-->
  <ul id="menu" class="menu">
  <li><a>栏目一</a></li>
  <li><a>栏目二</a></li>
  <li><a>栏目三</a></li>
  </ul>
</div><!----------内容区---------->
<div class="content">
<!--二级菜单栏:边栏-->
  <div id="sidebar" class="sidebar">
  <ul>
  <li id="m0_1" class="submenu">
  <a>我是左栏默认内容a</a>
  </li>
  <li id="m0_2" class="submenu">
  <a>我是左栏默认内容b</a>
  </li>
  </ul>
   
  <ul style="display:none">
  <li id="m1_1" class="submenu">
  <a href="">栏目一下的左栏a</a>
  </li>
  <li id="m1_1" class="submenu">
  <a href="">栏目一下的左栏b</a>
  </li>
  </ul>
   
  <ul style="display:none">
  <li class="submenu">
  <a href="">栏目二下的左栏a</a>
  </li>
  <li class="submenu">
  <a href="">栏目二下的左栏b</a>
  </li>
  </ul>
  </div>
   
   
  <!---分隔栏--->
  <a href="#" id="open" class="open"></a>
   
<!---主内容区--->
  <div class="main">
  <div class="crumb">当前位置:<span id="path"></span></div>
  这里如何能显示点击左栏后包含进来的文件内容。是用js还是php代码?
  </div>
</div>
</body>
</html>