2238

主题

0

好友

1万

积分

管理员

发表于 2017-12-14 13:20:49 |显示全部楼层
在DZ专题上利用JS+CSS实现自动切换或点击效果的简易版网址导航.
制作方式:
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文件如下:


游客,如果您要查看本帖隐藏内容请回复

  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代码如下:
  1. <script type="text/javascript">
  2. jq(document).ready(function () {
  3. jq('.daohang a').click(function () {
  4.         jq('.daohang a').removeClass("cur");
  5.         jq(this).addClass("cur");
  6.         var index = jq(".daohang a").index(this);
  7.         jq(".lp_content1_c").hide();
  8.         jq(".lp_content1_c").eq(index).show();
  9. });
  10. });
  11. </script>
复制代码
cs代码如下
  1. <style>
  2. .daohang{background: #EEF8FF;}
  3. .daohang728 {color: #666;border: 1px solid #ddd;}
  4. .daohang7281 {line-height: 30px;font-size: 15px;color: #666;position: relative;}
  5. .daohang a {border-bottom: 1px solid #DDDDDD;text-align: center;width: 4%;display: inline-block;padding: 0 9.4px;position: relative;font-size: 15px;vertical-align: top;transition: none;}
  6. .daohang a.cur {text-align: center;width: 4%;z-index: 10;height: 28px;background: #2F8BCD;color: #FFFFFF;text-decoration: none;}
  7. .lp_content1{height:100%;}
  8. .dd {font-size: 12px;border-radius: 5px;margin: 4.9px;width: 106px;text-align: center;font-style: normal;float: left;border: 1px solid #D2CECE;}
  9. .dd:hover{background: #2F8BCD;}
  10. .kuang{}
  11. .kuang a{color:#676767}
  12. .kuang a:hover{color:#fff}
  13. </style>
复制代码
【注明:此JS为鼠标滑动效果,如需换成点击切换效果请将JS中的mouseover改为click即可



上一篇:DZ门户关键词和描述为首页,需要登录后才可看到关键词和描述的解决办法
下一篇:dz预留UID
回复

使用道具 举报

0

主题

0

好友

12

积分

新手上路

发表于 2018-3-11 14:23:09 |显示全部楼层
屌丝模板网加油,我们都看好你哦。
回复

使用道具 举报

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

关闭

站长推荐 上一条 /1 下一条

屌丝模板站长
!tabtitle!
投诉/联系邮箱
admin@diaosimuban.com
微信扫一扫
直接访问本页内容

Archiver| 手机版| 屌丝模板网

Copyright © 2001-2012 Comsenz Inc. 屌丝模板 dsmb (http://www.diaosimuban.com) All Rights Reserved.

Powered by Discuz! X3.2( 苏ICP备17062248号-4 )

返回顶部