重庄时时彩开奖结果: JS实现系统??榈腡AB选项卡

2017-01-11 11:25:00
GavinHsueh
原创
2016

2017我被时时彩害死了 www.z61ld.com.cn 对于自定义内容的tab选项卡区块,大家可以直接到 2017我被时时彩害死了官网的特效板块中搜索相关的特效导入,本文是向大家介绍如何将蝉知系统里的内容板块组成tab选项卡,这里我没有用php+MYSQL调用数据,而是使用JS控制系统提供的内容区块,以达到我们想要的效果,比如下图所示的效果,是将最新文章、最新帖子和自定义区块组成为tab选项卡。

问题:上图所示的TAB选项卡如何实现的呢?

思路:我们可以用4个区块来实现这个效果,顶部选项卡按钮,蝉知动态,热门问题和交流互动。起初区块的布局如下:

我们可以用CSS和JS配合按钮的点击,来控制下面三个区块的显隐状态,以达到我们想要的效果。即当点击某个TAB按钮时,显示其对应的区块而隐藏另外两个区块。

操作:

把4个区块编辑好,系统区块这里我就不阐述了,给大家列一下顶部自定义的按钮区块的代码:

HTML代码:


<div class="btn-group">
  <button type="button" class="btn btn-primary" id="dongtai">蝉知动态</button>
  <button type="button" class="btn btn-success" id="wenti">热门问题</button></button>
  <button type="button" class="btn btn-info" id="hudong">交流互动</button>
</div>
CSS代码:



#block283,#block242{
    display:none;
    border-top:0px;
}
#block1{
    border-top:0px;
}
#blockID .btn-group button{
    width:126px;
}
上面的block1、283、242是下面三个区块的ID,这个大家根据自己创建的区块具体ID而定。


JS代码:


$(function(){
    $("#dongtai").click(function(){
        $("#block283,#block242").css("display","none");
        $("#block1").css("display","block");
    });
    
    $("#wenti").click(function(){
        $("#block283").css("display","block");
        $("#block1,#block242").css("display","none");
    });
    
    $("#hudong").click(function(){
        $("#block283,#block1").css("display","none");
        $("#block242").css("display","block");
    });
});
对于没有代码基础的童鞋,要注意区块ID的调整和按钮ID选择器的对应。


下载提示

蝉知使用问题交流,请加 官方QQ群: 284891062 , 加群请注明暗号: 蝉知。

获取技术支持注意事项: //www.z61ld.com.cn/page/qqgroup.html

欢迎关注我们的微博微信。

新浪微博:易软天创

微信公众号:易软天创

发表评论
评论通过审核后显示。
  • 【见证西安】NO.9西安首届农民节,记录西安农村新生活! 2019-06-25
  • 河北宣讲十九大:燕赵大地起春雷 高质发展显活力 2019-06-25
  • 不限量套餐猫腻多 工信部出手后三大运营商齐整改 2019-06-25
  • 英媒美国父母诉诸法院赶走"啃老"子女 中英均有类似问题 2019-06-25
  • 长效机制加速推进 楼市下半年或持续降温 2019-06-24
  • 新生入学网上怎么报名 合肥教育局解答常见问题 2019-06-24
  • 《人民币国际化报告(2012)》(日文版)简介 2019-06-23
  • 【没有青年,难得“里子”】人民日报:传承文脉,让乡村振兴有“面子”也有“里子” 2019-06-23
  • 裸条借贷,危险游戏何时休?-光明时评 2019-06-23
  • 我不知道你为什么不听劝,非要对自然科学发出疑问? 2019-06-22
  • 马克思主义何以改变人类历史发展进程 2019-06-22
  • 湖北123家企业携荆楚精品粮油亮相福州 2019-06-21
  • “1克陨石5万元”再掀赌石疯狂 2019-06-21
  • 里约奥运变化与机遇并存 充分准备迎接挑战 2019-06-21
  • 2015科教频道中秋晚会《天涯共此时》 2019-06-20
  • 快乐扑克360查询 凯斯娱乐城佣金 晚秋和值谜历史记录 平特是什么意思 江苏7位数开奖号玛 香l港赛马会官方网址 上海时时彩五星走势图 辽宁11选5开奖现场 河南11选5及时直播开奖 山东十一选五网易彩票结果开奖查询 3d号码920 排列5走势图带连线图表彩宝网 香港赛马会先 6场半全场11087 体彩七星彩走势图一综合版