dreamweaver 网页点击左边的导航让文本内容显示在右边的区域里,可以用Ap div,怎么弄啊？麻烦了。 html点击左边代码右边显示相应的内容
Dreamweaver\u4e2d\u5982\u4f55\u7528\u5c42\u505a\u5de6\u8fb9\u662f\u5bfc\u822a\u6761\uff0c\u53f3\u8fb9\u662f\u663e\u793a\u5185\u5bb9\u8fd9\u91cc\u8981\u7528\u7684frame\u6846\u67b6\uff1a
\u8bbe\u5b9a\u597d\u5de6\u53f3\u663e\u793a\u6bd4\u4f8b\uff0c\u6700\u540e\u663e\u793a\u6548\u679c\u5982\u4e0b\uff1a
\u8865\u5145\u8bf4\u660e\uff1a\u4f60\u8981\u5148\u628a\u53f3\u8fb9\u5c55\u793a\u7684\u6240\u6709\u5185\u5bb9\u90fd\u5355\u72ec\u5efa\u7acb\u4e00\u4e2a\u9875\u9762\u6587\u6863\u5982\uff1ahtml_contents.html\u548cexample/frame_a.html
1\u3001\u9996\u5148\u5728\u7535\u8111\u4e2d\u6253\u5f00Dreamweaver\uff0c\u7136\u540e\u5728\u7f51\u9875\u8bbe\u8ba1\u4e2d\u70b9\u51fb\u7f16\u8f91\u6309\u94ae\uff0c\u5c31\u53ef\u4ee5\u4e0b\u62c9\u3002
2\u3001\u7136\u540e\u70b9\u51fb\u8fd9\u4e2a\u4e8c\u7ea7\u83dc\u5355\u4ee3\u7801\u6298\u53e0\u3002
3\u3001\u63a5\u4e0b\u6765\u5728\u8fd9\u91cc\u5c31\u53ef\u4ee5\u4f7f\u7528\u5404\u79cd\u6298\u53e0\u7684\u547d\u4ee4\u4e86\uff0c\u540c\u6837\u8fd8\u80fd\u4f7f\u7528\u4ed6\u7684\u5feb\u6377\u952e\u6309\u94ae\u3002
4\u3001\u6216\u8005\u5728\u4ee3\u7801\u8fd9\u91cc\u8fd8\u53ef\u4ee5\u76f4\u63a5\u70b9\u51fb\u3002
5\u3001\u8fd9\u65f6\u5019\u5c31\u53ef\u4ee5\u770b\u5230\u4ee3\u7801\u540e\u9762\u8fd9\u6837\u7701\u7565\u7684\u663e\u793a\uff0c\u4ee3\u7801\u5c31\u88ab\u6298\u53e0\u8d77\u6765\u4e86\u3002
<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里试试~~~！希望对你有帮助
更换成 设计 模式就可以
扩展阅读：www.sony.com.cn ... www.vivo.com ... 色域adobe ... dreamware网页制作 ... 国产377vc精华真能祛斑吗 ... facebook官网入口 ... paperpass免费入口 ... www.paperyy.com ... ai网站 ...
