如何实现这个-HTML教程-爱易网页

如何实现这个

日期：2014-05-17　浏览次数：20762 次

怎么实现这个

点击菜单各个按钮会在下面显示不同页面，我不想用frame，是不是只能整个页面重做，我的意思是能不能把菜单栏那部分固定不变，讲个思路行么
------解决方案--------------------
下面有个例子，不是用iframe实现的，可以参考一下



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- saved from url=(0038)http://js.fgm.cc/learn/lesson2/07.html -->

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">



<title>简易选项卡</title>

<style>

body,ul,li{margin:0;padding:0;}

body{font:12px/1.5 Tahoma;}

#outer{width:450px;margin:10px auto;}

#tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}

#tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;}

#tab li.current{color:#000;background:#ccc;}

#content{border:1px solid #000;border-top-width:0;}

#content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;}

</style>

<script>

window.onload = function ()

{

	var oLi = document.getElementById("tab").getElementsByTagName("li");

	var oUl = document.getElementById("content").getElementsByTagName("ul");

	

	for(var i = 0; i < oLi.length; i++)

	{

		oLi[i].index = i;

		oLi[i].onmouseover = function ()

		{

			for(var n = 0; n < oLi.length; n++) oLi[n].className="";

			this.className = "current";

			for(var n = 0; n < oUl.length; n++) oUl[n].style.display = "none";

			oUl[this.index].style.display = "block"

		}	

	}

}

</script>

</head>

<body>

<div id="outer">

    <ul id="tab">

        <li class="">第一课</li>

        <li class="">第二课</li>

        <li class="current">第三课</li>

    </ul>

    <div id="content">

        <ul style="display: none; ">

            <li>网页特效原理分析</li>

            <li>响应用户操作</li>

            <li>提示框效果</li>

            <li>事件驱动</li>

            <li>元素属性操作</li>

            <li>动手编写第一个JS特效</li>

            <li>引入函数</li>

            <li>网页换肤效果</li>

            <li>展开/收缩播放列表效果</li>

        </ul>

        <ul style="display: none; ">

     &nbs

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

如何实现这个

相关资料更多>

推荐阅读更多>