【原创】在DZ专题上利用JS+CSS实现自动切换或点击效果的简易版网址导航

演示地址：http://hao.p2p110.com/
（文末配置演示图）

制作方式：
1、将template/default/portal/portal_topic_content.htm文件复制到template/当前模板/portal/portal_topic_content.htm，并重命名portal_topic_*****.htm，*****为需要命名的新名字（必须是英文状态，如portal_topic_daohang.htm）
2、登入网站后台，门户——专题管理——创建专题
3、输入专题名称——静态化名称（必须是英文状态，如daohang）——设置二级域名（可不设置）——SEO描述——SEO关键字——模板名（这里选择刚重命名的新文件portal_topic_daohang.htm）——提交
4、删除文件中默认代码段，需删除代码如下：

<div id="diypage" class="area">
<div id="frame1" class="frame move-span frame-1 cl">
<div class="frame-title title" id="frame1"><span class="titletext">{lang frame}</span></div>
<div id="frame1_left" class="column frame-1-c"></div>
</div>
</div>

复制代码

5、将如下PHP代码复制到刚刚删除的代码位置，保存。
6、刷新专题页面，导入DIY文件，DIY文件如下：

亲爱的游客您好，请登录后进行回复

PHP代码如下：

<div class="daohang728">
<div class="daohang7281">
<div class="daohang">
<a href="javascript:void();" class="a_menu cur">全部</a>
<a href="javascript:void();" class="a_menu">北京</a>
<a href="javascript:void();" class="a_menu">上海</a>
<a href="javascript:void();" class="a_menu">浙江</a>
<a href="javascript:void();" class="a_menu">广东</a>
<a href="javascript:void();" class="a_menu">天津</a>
<a href="javascript:void();" class="a_menu">四川</a>
<a href="javascript:void();" class="a_menu">江苏</a>
<a href="javascript:void();" class="a_menu">山东</a>
<a href="javascript:void();" class="a_menu">福建</a>
<a href="javascript:void();" class="a_menu">河南</a>
<a href="javascript:void();" class="a_menu">河北</a>
<a href="javascript:void();" class="a_menu">湖南</a>
<a href="javascript:void();" class="a_menu">湖北</a>
<a href="javascript:void();" class="a_menu">安徽</a>
<a href="javascript:void();" class="a_menu">江西</a>
<a href="javascript:void();" class="a_menu">辽宁</a>
<a href="javascript:void();" class="a_menu">吉林</a>
<a href="javascript:void();" class="a_menu">黑龙江</a>
<a href="javascript:void();" class="a_menu">陕西</a>
<a href="javascript:void();" class="a_menu">内蒙古</a>
<a href="javascript:void();" class="a_menu">山西</a>
<a href="javascript:void();" class="a_menu">宁夏</a>
<a href="javascript:void();" class="a_menu">甘肃</a>
<a href="javascript:void();" class="a_menu">青海</a>
<a href="javascript:void();" class="a_menu">重庆</a>
<a href="javascript:void();" class="a_menu">贵州</a>
<a href="javascript:void();" class="a_menu">广西</a>
<a href="javascript:void();" class="a_menu">云南</a>
<a href="javascript:void();" class="a_menu">西藏</a>
<a href="javascript:void();" class="a_menu">新疆</a>
<a href="javascript:void();" class="a_menu">海南</a>
</div>
<div class="lp_content1">
<div class="lp_content1_c" style="display: block;">
<div id="quanbu" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="beijing" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="shanghai" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="zhejiang" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="guangdong" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="tianjin" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="sichuan" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="jiangsu" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="shandong" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="fujian" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="henan" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="hebei" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="hubei" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="hunan" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="anhui" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="jiangxi" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="liaoning" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="jining" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="heilongjiang" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="shanxi" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="neimenggu" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="shanxi1" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="ningxia" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="gansu" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="qinghai" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="chongqing" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="guizhou" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="guangxi" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="yunnan" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="xizang" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="xinjiang" class="area"></div>
</div>
<div class="lp_content1_c" style="display: none;">
<div id="hainan" class="area"></div>
</div>
</div>
</div>
</div>

复制代码

JS代码如下：

亲爱的游客您好，请登录后进行回复

CSS代码如下：

亲爱的游客您好，请登录后进行回复

【注明：此JS为鼠标滑动效果，如需换成点击切换效果请将JS中的mouseover改为click即可】

【兔源码原创】在DZ专题上利用JS+CSS实现自动切换或点击效果的导航

		自动登录	找回密码
密码			立即注册

【原创】在DZ专题上利用JS+CSS实现自动切换或点击效果的简易版网址导航-Discuz教程下载

【原创】在DZ专题上利用JS+CSS实现自动切换或点击效果的简易版网址导航

相关文章

全部评论 0

最佳新人

管理/版主

土豪装逼

教程 / CSS+DIV素材

discuz 模板中使用方法和语言标签332人阅读

JavaScript或Jquery中多个输入字段的Onkeyup事件？312人阅读

HTML中限制input 输入框输入内容及onkeyup的多个判断过滤550人阅读

【实测】discuz去掉或修改搜索框里面的默认文字1084人阅读

discuz主题分类设置伪静态的方法1379人阅读

【转载】垂直时光轴HTML单页+CSS+js模块647人阅读

【转载】文字由左向右循环滚动DIY+CSS+js模块694人阅读

【原创】左侧导航栏样式，点击展开一级分类二级分类的DIY+CSS+JS3413人阅读

【原创】discuz论坛首页四格，幻灯片+文字列表切换功能DIY+CSS+j5321人阅读

【原创】侧边导航栏样式，点击跳转到对应位置的DIY+CSS模块5172人阅读

所属版块