首页tab切换 - ★☆━┇论坛代码┇━☆★ - 0930社区免费观看高清电影

返回列表发帖

[论坛代码] 首页tab切换| 4414 0

昵称:0930

经验: 21级

已经发了8152 篇文章咯快21级咯

楼主

发表于 2018-11-3 15:25

头衔:管理员

Rank: 9 Rank: 9 Rank: 9

歌曲: 心安理得

ID:1
精华: 19
积分:2308
帖子:Array [posts]

威望:2308
元宝:94
积极:0
贡献:0
魅力:2308
活跃:94
沙发:0
SoQ币:0

阅读权限:200
注册:2018-3-22
失踪: 2150天
在线:共541小时

倒序看帖

打印

字体大小: tT

0930发表于 2018-11-3 15:25 | 只看该作者您是本帖的第 4415 个阅读者

1、打开后台模板管理。找到discuz.htm
2、打开discuz.htm，并搜索$pluginhooks[index_middle]
3、在$pluginhooks[index_middle]前面加上以下代码：

<div class="yxyh">
<img class="headactions" id="category_46_img" src="http://0930.258club.com/attachments/day_181011/1810112142f3d3d35d4d4039e8.gif" style="margin: 0 6px -20px 0;z-index: 99999999;display: block;position: relative;">
<ul class=" menus3">
<div class="bg" style="left:0"></div>
<li style="background-color:#fff;color:rgb(255, 155, 155));"><span>最新电影</span></li>
<li style="color: rgb(0, 0, 0);"><span>探索奇谈</span></li>
<li style="color: rgb(0, 0, 0);"><span>抖音神曲</span></li>
</ul>
<div class="clear"></div>
<div class="tab tab2 show">数据调用A</div>
<div class="tab tab2">数据调用B</div>
<div class="tab tab2">数据调用C</div>
</div>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
$('.menus3 li').each(function(){$('.menus3 li').mouseover(function(){var index=$(this).index();$('.menus3 .bg').css('left',(index-
1)*200+'px');$('.menus3 li').css({"background": "none"});$(this).css({"background": "#fff"});$('.tab2').removeClass('show')
$('.tab2').eq(index-1).addClass
('show')});})})
</script>

复制

4、找到模板css_common。在里面添加一下代码：

.clear{clear:both}
.yxyh{height: 400px;border: 1px solid #CDCDCD;width:100%;margin:0 auto 10px;}
.yxyh ul{height: 35px;margin-top: -8px;width: 99.4%; position: relative; float: left; padding-left: 6px; color: #666; line-height: 35px; border-bottom: 1px solid #CDCDCD; background: url(http://0930.258club.com/attachments/day_180929/1809292339b73deb1542b45f24.png) repeat-x scroll 0px 0px #E5EDF2;}
.yxyh ul li{border-radius: 14px 15px 0 0;margin-top: 5px;list-style: none;float:left;width:200px;height:35px;line-height:25px;text-align:center;cursor:pointer;-webkit-transition:all .5s;-moz-
transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}
.yxyh li:nth-child(2){color:#000}
.yxyh .bg{width:200px;height:40px;position:absolute;left:0;top:0;background:#009fe9;z-index:-1;-webkit-transition:all .5s;-moz-transition:all
.5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}
.tab{width:100%;line-height:40px;text-align:center;color:#888;display:none}
.show{display:block}
.tab li{height: 150px;float: left; white-space: nowrap; margin:5px 6px 5px 7px; text-overflow: ellipsis; padding: 10px; border: solid #DDDDDD; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-width: 1px; background-color: #F8F8F8; text-align: center; overflow: hidden; list-style: none;}
.tab a{display: block;}
.tab p a{font-size: 15px;}

复制

ps:
1、
<div class="tab tab2 show">数据调用A</div>
<div class="tab tab2">数据调用B</div>
<div class="tab tab2">数据调用C</div>
文字替换数据调用内部代码

2、
<li style="background-color:#fff;color:rgb(255, 155, 155));"><span>最新电影</span></li>
<li style="color: rgb(0, 0, 0);"><span>探索奇谈</span></li>
<li style="color: rgb(0, 0, 0);"><span>抖音神曲</span></li>
文字替换为自定义菜单文字

0930说：

0930社区论坛版权1、本主题所有言论和图片纯属会员个人意见，与本论坛立场无关
2、本站所有主题由该帖子作者发表，该帖子作者与0930社区享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和0930社区的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体，但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题，请立即告知本站，本站将及时予与删除并致以最深的歉意
7、0930社区管理员和版主有权不事先通知发贴者而删除本文