网页目前效果及要实现的功能效果如下所示:(请在以下源码的基础上,修改完成所需效果。)网页源码如下:(请在以下源码的基础上,修改完成所需效果。)
<!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>
<!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>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货