找回密码
 立即注册

只需一步,快速开始

兔源码网 - 专注DZ模版分享、DZ插件分享!

搜索
查看: 44|回复: 0
收起左侧

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

[复制链接]
  • TA的每日心情
    萌哒
    2017-7-22 17:09
  • 1191

    主题

    1205

    帖子

    1915

    积分

    兔校长

    Rank: 9Rank: 9Rank: 9

    萝卜
    0 棵


    兔毛
    219 朵


    兔币
    9889 枚


    经验
    1915 点


    最佳新人管理/版主土豪装逼

    tuyuanma 发表于 2017-7-28 16:58:10 | 显示全部楼层 |阅读模式
    演示地址: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实现自动切换或点击效果的导航



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

    本版积分规则


    站点信息

    兔源码网 ( 赣ICP备17001544号 ) 赣公网安备36112102000036号 |网站地图

    © 2015-2022 兔源码DZ模板下载 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

    GMT+8, 2017-8-18 22:23

    快速回复 返回顶部 返回列表