网页设计切换菜单 第1篇
我们先写结构和样式部分：
<style>
.on{
/* 让class名是on的元素，文字变成红色 */
color:red;
#con div{
width:200px;
height:200px;
border:10px solid orange;
/* 让内容区域都隐藏起来 */
display:none;
#con .active{
/* 让class名是active的元素显示出来 */
display:block;
style>
<body>
<divid=_btn_>
<buttonclass=_on_>标题1button>
<button>标题2button>
<button>标题3button>
div>
<divid=_con_>
<divclass=_active_>内容1div>
<div>内容2div>
<div>内容3div>
div>
body>
网页设计切换菜单 第2篇
1. 我们需要先把所有内容区域都隐藏，所以我们使用for循环来写。
2. 把所有内容区域div的class名去掉就可以了。
3. 把当前索引对应的内容区域展示出来，只需要把class名active加上就可了，active的样式我们在上面已经写过了。
代码如下：
//隐藏所有内容区域。
for(varj=0;j<ocon.length;j++){
ocon[j].className='';
//当前索引对应的内容展示出来。
ocon[this.index].className='active';
网页设计切换菜单 第3篇
我们发现按钮的长度（）和内容的长度（）是一样的，上面我们是用两个for循环来写，其实我们可以把代码优化下，改成用一个for循环就可以了。代码如下：
for(varj=0;j<obtn.length;j++){
// 去掉所有按钮的class名。
obtn[j].className=__;
//隐藏所有内容区域。
ocon[j].className='';
网页设计切换菜单 第4篇
<html>
<head>
<metacharset=_UTF-8_>
<title>tab切换title>
<style>
.on{
/* 让class名是on的元素，文字变成红色 */
color:red;
#con div{
width:200px;
height:200px;
border:10px solid orange;
/* 让内容区域都隐藏起来 */
display:none;
#con .active{
/* 让class名是active的元素显示出来 */
display:block;
style>
head>
<body>
<divid=_btn_>
<buttonclass=_on_>标题1button>
<button>标题2button>
<button>标题3button>
div>
<divid=_con_>
<divclass=_active_>内容1div>
<div>内容2div>
<div>内容3div>
div>
<script>
//获取到id名是btn的元素。
varbtn=document.getElementById(_btn_);
//获取到btn里面标签名是button的元素，也就是获取到3个按钮。
varobtn=btn.getElementsByTagName(_button_);
//获取到id名是con的元素。
varcon=document.getElementById(_con_);
//获取到con里面标签名是div的元素，也就是获取到3个内容。
varocon=con.getElementsByTagName(_div_);
for(vari=0;i<obtn.length;i++){
//给每个按钮定义了一个index属性，这个index是属于obtn[i]的属性和方法。
obtn[i].index=i;
网页设计切换菜单 第5篇
1、在“插入跳转菜单”对话框中不要勾选“菜单之后插入前往按钮”。将来网页跳转菜单中的菜单项只要单击就能跳转。
2、现在单击“确定”按钮，跳转菜单就制作好了，在浏览器中就可以见到效果。
网页设计切换菜单 第6篇
1、在“插入跳转菜单”对话框中勾选“菜单之后插入前往按钮”。将来网页跳转菜单中的菜单项选定后再单击“前往”按钮就能跳转。
2、现在单击“确定”按钮，跳转菜单就制作好了，在浏览器中就可以见到效果。
网页设计切换菜单 第7篇
1、打开Dreamweaver软件，选择“创建新项目”中的“Html”。
2、单击菜单栏中的“插入”——表单——跳转菜单。
3、在弹出的“插入跳转菜单”对话框中，单击“+”按钮，可以增加菜单项；单击“-”按钮，可以删除菜单项，菜单项在下面的列表中显示。
4、现在选定“菜单项”列表中的菜单项，在“文本”框中输入新的名称。
5、选定“插入跳转菜单”对话框中的菜单项，单击“浏览”按钮。
6、在弹出的“选择文件”对话框选择要跳转的文件，单击“确定”按钮。
网页设计切换菜单 第8篇
1、在“插入跳转菜单”对话框最下面有个“更改URL后选择第一个项目”，如果勾选了它，则在跳转后会回到初始状态；不勾选它，则在跳转后不回到初始状态。
2、如果要再加入菜单项，只要在第一个菜单的后面单击“回车”，换行。
以上就是Dreamweaver制作跳转菜单的方法，希望能帮到大家，喜欢的朋友可以关注脚本之家。