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

登录/ 注册
站长工具
搜索
返回列表 发新帖

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

来自版块: Discuz教程发表于: 2017-7-28 16:58:10
49071
0
如本资源下载地址失效,请点击此处进行反馈
演示地址：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、删除文件中默认代码段，需删除代码如下：
  1. <!--[diy=diypage]-->
  2. <div id="diypage" class="area">
  3.         <div id="frame1" class="frame move-span frame-1 cl">
  4.                 <div class="frame-title title" id="frame1"><span class="titletext">{lang frame}</span></div>
  5.                 <div id="frame1_left" class="column frame-1-c"></div>
  6.         </div>
  7. </div>
  8. <!--[/diy]-->
复制代码
5、将如下PHP代码复制到刚刚删除的代码位置，保存。
6、刷新专题页面，导入DIY文件，DIY文件如下：
亲爱的游客

PHP代码如下：
  1. <div class="daohang728">
  2.     <div class="daohang7281">
  3.         <div class="daohang">
  4.             <a href="javascript:void();" class="a_menu cur">全部</a>
  5.             <a href="javascript:void();" class="a_menu">北京</a>
  6.             <a href="javascript:void();" class="a_menu">上海</a>
  7.             <a href="javascript:void();" class="a_menu">浙江</a>
  8.             <a href="javascript:void();" class="a_menu">广东</a>
  9.             <a href="javascript:void();" class="a_menu">天津</a>
  10.             <a href="javascript:void();" class="a_menu">四川</a>
  11.             <a href="javascript:void();" class="a_menu">江苏</a>
  12.             <a href="javascript:void();" class="a_menu">山东</a>
  13.             <a href="javascript:void();" class="a_menu">福建</a>
  14.             <a href="javascript:void();" class="a_menu">河南</a>
  15.             <a href="javascript:void();" class="a_menu">河北</a>
  16.             <a href="javascript:void();" class="a_menu">湖南</a>
  17.             <a href="javascript:void();" class="a_menu">湖北</a>
  18.             <a href="javascript:void();" class="a_menu">安徽</a>
  19.             <a href="javascript:void();" class="a_menu">江西</a>
  20.             <a href="javascript:void();" class="a_menu">辽宁</a>
  21.             <a href="javascript:void();" class="a_menu">吉林</a>
  22.             <a href="javascript:void();" class="a_menu">黑龙江</a>            
  23.             <a href="javascript:void();" class="a_menu">陕西</a>
  24.             <a href="javascript:void();" class="a_menu">内蒙古</a>
  25.             <a href="javascript:void();" class="a_menu">山西</a>
  26.             <a href="javascript:void();" class="a_menu">宁夏</a>
  27.             <a href="javascript:void();" class="a_menu">甘肃</a>
  28.             <a href="javascript:void();" class="a_menu">青海</a>
  29.             <a href="javascript:void();" class="a_menu">重庆</a>
  30.             <a href="javascript:void();" class="a_menu">贵州</a>
  31.             <a href="javascript:void();" class="a_menu">广西</a>
  32.             <a href="javascript:void();" class="a_menu">云南</a>
  33.             <a href="javascript:void();" class="a_menu">西藏</a>
  34.             <a href="javascript:void();" class="a_menu">新疆</a>
  35.             <a href="javascript:void();" class="a_menu">海南</a>
  36.         </div>
  37.         <div class="lp_content1">
  38.             <div class="lp_content1_c" style="display: block;">
  39.                 <!--[diy=quanbu]--><div id="quanbu" class="area"></div><!--[/diy]-->
  40.             </div>
  41.             <div class="lp_content1_c" style="display: none;">
  42.                 <!--[diy=beijing]--><div id="beijing" class="area"></div><!--[/diy]-->
  43.             </div>
  44.             <div class="lp_content1_c" style="display: none;">
  45.                 <!--[diy=shanghai]--><div id="shanghai" class="area"></div><!--[/diy]-->
  46.             </div>
  47.             <div class="lp_content1_c" style="display: none;">
  48.                 <!--[diy=zhejiang]--><div id="zhejiang" class="area"></div><!--[/diy]-->
  49.             </div>
  50.             <div class="lp_content1_c" style="display: none;">
  51.                 <!--[diy=guangdong]--><div id="guangdong" class="area"></div><!--[/diy]-->
  52.             </div>
  53.             <div class="lp_content1_c" style="display: none;">
  54.                 <!--[diy=tianjin]--><div id="tianjin" class="area"></div><!--[/diy]-->
  55.             </div>
  56.             <div class="lp_content1_c" style="display: none;">
  57.                 <!--[diy=sichuan]--><div id="sichuan" class="area"></div><!--[/diy]-->
  58.             </div>
  59.             <div class="lp_content1_c" style="display: none;">
  60.                 <!--[diy=jiangsu]--><div id="jiangsu" class="area"></div><!--[/diy]-->
  61.             </div>
  62.             <div class="lp_content1_c" style="display: none;">
  63.                 <!--[diy=shandong]--><div id="shandong" class="area"></div><!--[/diy]-->
  64.             </div>
  65.             <div class="lp_content1_c" style="display: none;">
  66.                 <!--[diy=fujian]--><div id="fujian" class="area"></div><!--[/diy]-->
  67.             </div>
  68.             <div class="lp_content1_c" style="display: none;">
  69.                 <!--[diy=henan]--><div id="henan" class="area"></div><!--[/diy]-->
  70.             </div>
  71.             <div class="lp_content1_c" style="display: none;">
  72.                 <!--[diy=hebei]--><div id="hebei" class="area"></div><!--[/diy]-->
  73.             </div>
  74.             <div class="lp_content1_c" style="display: none;">
  75.                 <!--[diy=hubei]--><div id="hubei" class="area"></div><!--[/diy]-->
  76.             </div>
  77.             <div class="lp_content1_c" style="display: none;">
  78.                 <!--[diy=hunan]--><div id="hunan" class="area"></div><!--[/diy]-->
  79.             </div>
  80.             <div class="lp_content1_c" style="display: none;">
  81.                 <!--[diy=anhui]--><div id="anhui" class="area"></div><!--[/diy]-->
  82.             </div>
  83.             <div class="lp_content1_c" style="display: none;">
  84.                 <!--[diy=jiangxi]--><div id="jiangxi" class="area"></div><!--[/diy]-->
  85.             </div>
  86.             <div class="lp_content1_c" style="display: none;">
  87.                 <!--[diy=liaoning]--><div id="liaoning" class="area"></div><!--[/diy]-->
  88.             </div>
  89.             <div class="lp_content1_c" style="display: none;">
  90.                 <!--[diy=jining]--><div id="jining" class="area"></div><!--[/diy]-->
  91.             </div>
  92.             <div class="lp_content1_c" style="display: none;">
  93.                 <!--[diy=heilongjiang]--><div id="heilongjiang" class="area"></div><!--[/diy]-->
  94.             </div>
  95.             <div class="lp_content1_c" style="display: none;">
  96.                 <!--[diy=shanxi]--><div id="shanxi" class="area"></div><!--[/diy]-->
  97.             </div>
  98.             <div class="lp_content1_c" style="display: none;">
  99.                 <!--[diy=neimenggu]--><div id="neimenggu" class="area"></div><!--[/diy]-->
  100.             </div>
  101.             <div class="lp_content1_c" style="display: none;">
  102.                 <!--[diy=shanxi1]--><div id="shanxi1" class="area"></div><!--[/diy]-->
  103.             </div>
  104.             <div class="lp_content1_c" style="display: none;">
  105.                 <!--[diy=ningxia]--><div id="ningxia" class="area"></div><!--[/diy]-->
  106.             </div>
  107.             <div class="lp_content1_c" style="display: none;">
  108.                 <!--[diy=gansu]--><div id="gansu" class="area"></div><!--[/diy]-->
  109.             </div>
  110.             <div class="lp_content1_c" style="display: none;">
  111.                 <!--[diy=qinghai]--><div id="qinghai" class="area"></div><!--[/diy]-->
  112.             </div>
  113.             <div class="lp_content1_c" style="display: none;">
  114.                 <!--[diy=chongqing]--><div id="chongqing" class="area"></div><!--[/diy]-->
  115.             </div>
  116.             <div class="lp_content1_c" style="display: none;">
  117.                 <!--[diy=guizhou]--><div id="guizhou" class="area"></div><!--[/diy]-->
  118.             </div>
  119.             <div class="lp_content1_c" style="display: none;">
  120.                 <!--[diy=guangxi]--><div id="guangxi" class="area"></div><!--[/diy]-->
  121.             </div>
  122.             <div class="lp_content1_c" style="display: none;">
  123.                 <!--[diy=yunnan]--><div id="yunnan" class="area"></div><!--[/diy]-->
  124.             </div>
  125.             <div class="lp_content1_c" style="display: none;">
  126.                 <!--[diy=xizang]--><div id="xizang" class="area"></div><!--[/diy]-->
  127.             </div>
  128.             <div class="lp_content1_c" style="display: none;">
  129.                 <!--[diy=xinjiang]--><div id="xinjiang" class="area"></div><!--[/diy]-->
  130.             </div>
  131.             <div class="lp_content1_c" style="display: none;">
  132.                 <!--[diy=hainan]--><div id="hainan" class="area"></div><!--[/diy]-->
  133.             </div>
  134.         </div>
  135.     </div>
  136. </div>
复制代码
JS代码如下：
亲爱的游客
CSS代码如下：
亲爱的游客


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

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

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


原创，专题，利用，CSS，实现，自动，切换，点击，效果，简易，网址，导航

举报

全部评论 0

期待你的评论哦~

教程 / CSS+DIV素材

  • Discuz教程
  • CSS+DIV素材

所属版块

返回版块

您需要登录后才可以回帖 立即登录
登录

©2015-2022 tuyuanma.com 版权所有 Sitemap.xml

本站内容皆来自网络分享，如有侵权请联系我们处理。

赣公网安备36112102000036号 赣ICP备17001544号-10

联系邮箱：tuyuanma@qq.com 联系QQ：3197813386

返回顶部