怎样用DW做滑动门的效果
我用PS做好了图!但是不知道怎样在DW中做滑动门，像下图一样！只要点击标签就会切换页面！这样的效果在dW中怎样制作！要教程和制作过程！教会了，我追分！我找了一天了！都没找...
我用PS做好了图!但是不知道怎样在DW中做滑动门，像下图一样！只要点击标签就会切换页面！这样的效果在dW中怎样制作！要教程和制作过程！教会了，我追分！我找了一天了！都没找到这么个教程！不要代码！我看不懂！
展开
2个回答
展开全部
滑动门永远是新手的目标！而且单纯的DW是做不出这种效果的，必须要有javascript的！
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}
.ctt{height:auto;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*整个滑动门的宽度*/}
/*TAB切换效果*/
.tb_{滑动门背景}
.tb_ ul{height:24px;}
.tb_ li{float:left; margin-right:2px;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}
/*用于控制显示与隐藏的css类*/
.normaltab{选中的滑动门标签背景}
.hovertab{未选中的滑动门标签背景}
.dis{display:block;}
.undis{display:none;}
-->
</style>
<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如果有N个标签，就将i<=N;
for(var i=1;i<=3;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//如果要做成点击后再转到请将<li>中的onmouseover改成onclick;
//]]>
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="w936">
<div id="tb_" class="tb_">
<ul>
<li id="tb_1" class="hovertab" onMouseOver="x:HoverLi(1);">
标题1</li>
<li id="tb_2" class="normaltab" onMouseOver="i:HoverLi(2);">
标题2</li>
<li id="tb_3" class="normaltab" onMouseOver="a:HoverLi(3);">
标题3</li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tbc_01">内容1</div>
<div class="undis" id="tbc_02">内容2</div>
<div class="undis" id="tbc_03">内容3</div>
</div>
</div>
</div>
如果你觉得内容123用div控制很麻烦的话，你可以用表格。如果你连滑动门的代码都看不懂的话你就不要做滑动门了！
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}
.ctt{height:auto;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*整个滑动门的宽度*/}
/*TAB切换效果*/
.tb_{滑动门背景}
.tb_ ul{height:24px;}
.tb_ li{float:left; margin-right:2px;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}
/*用于控制显示与隐藏的css类*/
.normaltab{选中的滑动门标签背景}
.hovertab{未选中的滑动门标签背景}
.dis{display:block;}
.undis{display:none;}
-->
</style>
<script type="text/javascript" language="javascript">
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如果有N个标签，就将i<=N;
for(var i=1;i<=3;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//如果要做成点击后再转到请将<li>中的onmouseover改成onclick;
//]]>
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="w936">
<div id="tb_" class="tb_">
<ul>
<li id="tb_1" class="hovertab" onMouseOver="x:HoverLi(1);">
标题1</li>
<li id="tb_2" class="normaltab" onMouseOver="i:HoverLi(2);">
标题2</li>
<li id="tb_3" class="normaltab" onMouseOver="a:HoverLi(3);">
标题3</li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tbc_01">内容1</div>
<div class="undis" id="tbc_02">内容2</div>
<div class="undis" id="tbc_03">内容3</div>
</div>
</div>
</div>
如果你觉得内容123用div控制很麻烦的话，你可以用表格。如果你连滑动门的代码都看不懂的话你就不要做滑动门了！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
单纯的dw是做不出这种效果的，必须要有javascript的。
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
ul{list-style-type:none; margin:0px;}
.ctt{height:auto;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*整个滑动门的宽度*/}
/*tab切换效果*/
.tb_{滑动门背景}
.tb_ ul{height:24px;}
.tb_ li{float:left; margin-right:2px;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}
/*用于控制显示与隐藏的css类*/
.normaltab{选中的滑动门标签背景}
.hovertab{未选中的滑动门标签背景}
.dis{display:block;}
.undis{display:none;}
-->
</style>
<script type="text/javascript" language="javascript">
//<!cdata[
function g(o){return document.getElementbyId(o);}
function HoverLi(n){
//如果有N个标签，就将i<=N;
for(var i=1;i<=3;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//如果要做成点击后再转到请将<li>中的onmouseover改成onclick;
//]]>
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="w936">
<div id="tb_" class="tb_">
<ul>
<li id="tb_1" class="hovertab" onMouseOver="x:HoverLi(1);">
标题1</li>
<li id="tb_2" class="normaltab" onMouseOver="i:HoverLi(2);">
标题2</li>
<li id="tb_3" class="normaltab" onMouseOver="a:HoverLi(3);">
标题3</li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tbc_01">内容1</div>
<div class="undis" id="tbc_02">内容2</div>
<div class="undis" id="tbc_03">内容3</div>
</div>
</div>
</div>
如果你觉得内容123用div控制很麻烦的话，你可以用表格。
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
ul{list-style-type:none; margin:0px;}
.ctt{height:auto;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*整个滑动门的宽度*/}
/*tab切换效果*/
.tb_{滑动门背景}
.tb_ ul{height:24px;}
.tb_ li{float:left; margin-right:2px;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}
/*用于控制显示与隐藏的css类*/
.normaltab{选中的滑动门标签背景}
.hovertab{未选中的滑动门标签背景}
.dis{display:block;}
.undis{display:none;}
-->
</style>
<script type="text/javascript" language="javascript">
//<!cdata[
function g(o){return document.getElementbyId(o);}
function HoverLi(n){
//如果有N个标签，就将i<=N;
for(var i=1;i<=3;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//如果要做成点击后再转到请将<li>中的onmouseover改成onclick;
//]]>
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="w936">
<div id="tb_" class="tb_">
<ul>
<li id="tb_1" class="hovertab" onMouseOver="x:HoverLi(1);">
标题1</li>
<li id="tb_2" class="normaltab" onMouseOver="i:HoverLi(2);">
标题2</li>
<li id="tb_3" class="normaltab" onMouseOver="a:HoverLi(3);">
标题3</li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tbc_01">内容1</div>
<div class="undis" id="tbc_02">内容2</div>
<div class="undis" id="tbc_03">内容3</div>
</div>
</div>
</div>
如果你觉得内容123用div控制很麻烦的话，你可以用表格。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
