北京时时彩的官网: JS实现系统??榈腡AB选项卡

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

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

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

新浪微博:易软天创

微信公众号:易软天创

发表评论
评论通过审核后显示。
  • 【互动话题】我为两会建言献策 2019-04-20
  • 青年创新前沿论坛在海淀创业园成功举办 2019-04-20
  • 苹果看好低价款iPhone X:配备LCD屏 2019-04-19
  • 一只浣熊都这么努力,你还有什么理由不上进! 2019-04-19
  • 彭湃:“农民运动大王”(为了民族复兴·英雄烈士谱) 2019-04-19
  • 买房先下手为强 西安这些不限购楼盘免去购房资格困扰 ——凤凰网房产西安 2019-04-18
  • 淮南老市政府大院已更新改造 未来将变身街边广场 2019-04-18
  • 证明“你爸是你爸”背后的甩锅逻辑 2019-04-17
  • 中共中央直属机关党校 2019-04-17
  • 护肤品达不到的效果怎么办? 让这些网红皮肤管理项目来帮你 2019-04-16
  • “买房号”就包买河西房?男子借机骗走170多万 ——凤凰网房产南京 2019-04-16
  • 泰安日报社社长戴冰祝贺人民日报创刊70周年 2019-04-16
  • 爱国统一战线称谓的由来 2019-04-16
  • 西安“摇号门”涉事开发商道歉 此前称遭恶意诋毁 2019-04-15
  • 习近平日内瓦演讲一周年世界为何青睐"人类命运共同体" 2019-04-15
  • 580| 150| 44| 668| 806| 430| 305| 545| 313| 874|