dreamweaver 网页点击左边的导航让文本内容显示在右边的区域里,可以用Ap div,怎么弄啊？麻烦了。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了dreamweaver 网页点击左边的导航让文本内容显示在右边的区域里,可以用Ap div,怎么弄啊？麻烦了。相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<title>选项卡</title>
<style type="text/css">
<!--
* margin:0; padding:0; font-size:12px; font-weight:normal;
.jj font-weight:bolder!important;
.box border-top-color:#c00!important;
.pr color:#060!important;
#tab01 position:relative; width:336px; height:88px; padding-top:15px; margin:50px; overflow:hidden;
#tab01 h3 position:relative; z-index:2; float:left; height:14px; padding:0 7px 0 8px; margin-left:-1px; border-left:solid 1px #ccc; border-right:solid 1px #fff; text-align:center; background:#fff; cursor:pointer;
#tab01 h3.up height:18px; padding:5px 7px 0 7px; margin:-6px 0 0 0; border:solid #ccc; border-width:1px 1px 0; color:#c00;
#tab01 div display:none; position:absolute; left:0; top:32px; z-index:1; width:324px; height:54px; padding:5px; border:solid 1px #ccc; color:#666;
#tab01 div.up display:block;
#tab02 position:relative; width:200px; margin:50px; border:solid #ccc; border-width:0 1px 1px;
#tab02 h4 height:18px; line-height:18px; border:solid #ccc; border-width:1px 0; margin-bottom:-1px; text-align:center; background:#f6f6f6; cursor:pointer;
#tab02 h4.up color:#c00;
#tab02 ol display:none; height:54px; padding:5px; color:#666;
#tab02 ol.up display:block;
#tab03 position:relative; width:100px; margin:50px;
#tab03 h3 position:relative; z-index:1; height:16px; padding-top:4px; margin-bottom:-1px; border:solid #ccc; border-width:1px 0 1px 1px; text-align:center; font-family:宋体; background:#eee; cursor:pointer;
#tab03 h3.up z-index:3; color:#c00; background:#fff;
#tab03 div.tab display:none; position:absolute; left:99px; top:0; z-index:2; width:300px; height:200px; padding:5px; border:solid 1px #ccc; color:#666;
#tab03 div.tab.up display:block;
-->
</style>
</head>
<body>
<div id="tab01">
<h3>首页</h3>
<div class="jj"><p>嘿嘿，无视div原始class值。</p></div>
<h3 class="pr">测试</h3>
<div><p>继续无视h3原始class值。</p></div>
<h3>无聊</h3>
<div><p>h3没有值也可以～</p></div>
<h3 class="box">傻蛋</h3>
<div><p>div没有值一样可以～</p></div>
</div>
<div id="tab02">
<h4>首页</h4>
<ol class="pr"><li>嘿嘿，无视容器原始class值。</li></ol>
<h4 class="box">测试</h4>
<ol><li>继续无视h3原始class值。</li></ol>
<h4>无聊</h4>
<ol><li>h3没有值也可以～</li></ol>
<h4 class="bb">傻蛋</h4>
<ol><li>div没有值一样可以～</li></ol>
</div>
<div id="tab03">
<h3>首页</h3>
<div class="tab"><p>嘿嘿，无视h3原始class值。</p></div>
<h3>测试</h3>
<div class="tab wushi"><p>继续无视div原始class值。</p></div>
<h3>无聊</h3>
<div class="tab"><p>h3没有值也可以～</p></div>
<h3 class="box">傻蛋</h3>
<div class="tab tab123"><p>class值相似一样也可以～</p><div><p>指定class后，即时再多一个div也行。</p></div></div>
</div>
<script type="text/javascript">
<!--
function Pid(id,tag)
if(!tag)
return document.getElementById(id);
else
return document.getElementById(id).getElementsByTagName(tag);
function tab(id,hx,box,iClass,s,pr)
var hxs=Pid(id,hx);
var boxs=Pid(id,box);
if(!iClass) // 如果不指定class，则：
boxsClass=boxs; // 直接使用box作为容器
else // 如果指定class，则：
var boxsClass = [];
for(i=0;i<boxs.length;i++)
if(boxs[i].className.match(/\\btab\\b/))// 判断容器的class匹配
boxsClass.push(boxs[i]);
if(!pr) // 如果不指定预展开容器，则：
go_to(0); // 默认展开序列
yy();
else
go_to(pr);
yy();
function yy()
for(var i=0;i<hxs.length;i++)
hxs[i].temp=i;
if(!s)// 如果不指定事件，则：
s="onmouseover"; // 使用默认事件
hxs[i][s]=function()
go_to(this.temp);
else
hxs[i][s]=function()
go_to(this.temp);
function go_to(pr)
for(var i=0;i<hxs.length;i++)
if(!hxs[i].tmpClass)
hxs[i].tmpClass=hxs[i].className+=" ";
boxsClass[i].tmpClass=boxsClass[i].className+=" ";
if(pr==i)
hxs[i].className+=" up"; // 展开状态：标题
boxsClass[i].className+=" up"; // 展开状态：容器
else
hxs[i].className=hxs[i].tmpClass;
boxsClass[i].className=boxsClass[i].tmpClass;
tab("tab01","h3","div","","onclick",2); tab("tab02","h4","ol");tab("tab03","h3","div","tab");
//-->
</script>
</body>
</html>
粘贴都DW里试试~~~！希望对你有帮助 参考技术A 更换成 设计 模式就可以
div+css ，左边导航，右边显示内容，点击那个导航显示那个内容
<div class="nav">
<div class="dow1">
<ul class="ul">
<li id="LI0" class="li">
<a href="#" onclick="document.getElementById('cont0').style.display='block';document.getElementById('cont1').style.display='none'">企业简介</a>
</li>
<li id="LI1" class="li">
<a href="#" onclick="document.getElementById('cont1').style.display='block';document.getElementById('cont0').style.display='none';document.getElementById('cont2').style.display='block';document.getElementById('cont3').style.display='none'"
>第二个内容</a></li>
<li id="LI2" class="li">
<a href="#" onclick="document.getElementById('cont2').style.display='block';document.getElementById('cont0').style.display='none'"
>第三个内容</a></li>
<li id="LI3" class="li">
<a href="#" onclick="document.getElementById('cont3').style.display='block';document.getElementById('cont0').style.display='none'"
>第四个内容</a></li>
<li id="LI4" class="li">
<a href="#" onclick="document.getElementById('cont4').style.display='block';document.getElementById('cont0').style.display='none'"
>第五个内容</a></li>
</ul>
</div>
<div class="dow2">
<div id="cont0" class="navv">
第一个内容
第一个内容
第一个内容
</div>
<div id="cont1" class="navv">
第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个</div>
<div id="cont2" class="navv">
第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个</div>
<div id="cont3" class="navv">
第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个
</div>
<div id="cont4" class="navv">
第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个
第二个内容
</div>
这是我要的效果，点击第一个导航，右边的文字区域和图片区域全都切换，文字区域和图片区域地方不变，点击导航只变里边的内容
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="roots" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title></title>
<style type="text/css">
bodyfont:"宋体";font-size:12px;
a:link,a:visitedfont-size:12px;color:#666;text-decoration:none;
a:hovercolor:#ff0000;text-decoration:underline;
#Tabmargin:0 auto;width:220px;border:1px solid #BCE2F3;
.Menuboxheight:28px;border-bottom:1px solid #64B8E4;background:#E4F2FB;
.Menubox ullist-style:none;margin:7px 40px;padding:0;position:absolute;
.Menubox ul lifloat:left;background:#64B8E4;line-height:20px;display:block;cursor:pointer;width:65px;text-align:center;color:#fff;font-weight:bold;border-top:1px solid #64B8E4;border-left:1px solid #64B8E4;border-right:1px solid #64B8E4;
.Menubox ul li.hoverbackground:#fff;border-bottom:1px solid #fff;color:#147AB8;
.Contentboxclear:both;margin-top:0px;border-top:none;height:181px;padding-top:8px;height:100%;
.Contentbox ullist-style:none;margin:7px;padding:0;
.Contentbox ul liline-height:24px;border-bottom:1px dotted #ccc;
</style>
<script>
<!--
function setTab(name,cursel,n)
for(i=1;i<=n;i++)
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
//-->
</script>
</head>
<body>
<div id="Tab">
<div class="Menubox">
<ul>
<li id="menu1" onmouseover="setTab('menu',1,2)" class="hover">高职高专</li>
<li id="menu2" onmouseover="setTab('menu',2,2)" >民办学校</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_menu_1" class="hover">
<ul>
<li>·<a href="#">北京工业职业技术学院</a></li>
<li>·<a href="#">北京财贸职业学院</a></li>
<li>·<a href="#">天津职业大学</a></li>
<li>·<a href="#">大连职业技术学院</a></li>
<li>·<a href="#">辽宁交通高等专科学校</a></li>
<li>·<a href="#">浙江金融职业学院</a></li>
<li>·<a href="#">山东商业职业技术学院</a></li>
<li>·<a href="#">宁波职业技术学院</a></li>
<li>·<a href="#">武汉职业技术学院</a></li>
</ul>
</div>
<div id="con_menu_2" style="display:none">
<ul>
<li>·<a href="#">江西蓝天学院</a></li>
<li>·<a href="#">西安外事学院</a></li>
<li>·<a href="#">湖南涉外经济学院</a></li>
<li>·<a href="#">西安翻译学院</a></li>
<li>·<a href="#">三江学院</a></li>
<li>·<a href="#">北京城市学院</a></li>
<li>·<a href="#">黄河科技学院</a></li>
<li>·<a href="#">吉林华桥外国语学院</a></li>
<li>·<a href="#">浙江树人学院</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>追问
我要的就是我给出的那个代码
追答你拿我给你的修改一下就好了，你写的那个太乱了
追问不是啊，你给的是竖排的，我要横排的，是那种点击以后再切换内容的
，麻烦你改一下
我已经改好了，但是代码字数超出范围上传不了，你给Q Q 邮 箱 我，我发你
追问97302936艾特qq.com,谢谢大神
本回答被提问者采纳以上是关于dreamweaver 网页点击左边的导航让文本内容显示在右边的区域里,可以用Ap div,怎么弄啊？麻烦了。的主要内容，如果未能解决你的问题，请参考以下文章
网页设计中为啥随便插入一个标签在dreamweaver中都与左边有一个小边距，预览也有边距，这个