效果:

html:

JS:

css:

.tabs-two{
.two{
display: inline-block;
font-size:14px;
height: 17px;
font-weight:300;
color:#444444;
margin-top:10px;
height:26px;
text-align: center;
line-height: 26px;
border-radius:2px;
cursor: pointer;
 
}
.two:hover{
background:rgba(252,69,48,1);
color:#fff;
}
.newreply{
margin-left:17px;
width:76px;
 
}
.waitreply{
margin-left:6px;
width:62px;
}
.overreply{
margin-left:8px;
width:62px;
}
.checked{
background:rgba(252,69,48,1);
color:#fff;
}
}

js-点击tab按钮,同一页面显示不同的内容的更多相关文章

  1. PHP——0128练习相关2——js点击button按钮跳转到另一个新页面

    js点击button按钮跳转到另一个新页面 投稿:whsnow 字体:[增加 减小] 类型:转载 时间:2014-10-10我要评论 点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎么 ...

  2. ASP.NET防止连续多次点击提交按钮 导致页面重复提交

    PS:实际使用中发现,第①种方法在火狐浏览中有时候有问题.第2种方法,在各个浏览器中都没问题 近做项目遇到了这样的情况: 公司网络比平常慢了不少,在点击保存按钮提交页面后需等待挺长的一段时间,忍不住手 ...

  3. 制作四个选项卡页 Tab,用户可以通过切换不同的 Tab 页查看不同类别的新闻信息,每个 Tab 有对应的内容版块,点击某个选项卡时,显示对应的内容版块,隐藏其他内容版块,并且为了突出当前的选项卡,还

    查看本章节 查看作业目录 需求说明: 制作四个选项卡页 Tab,用户可以通过切换不同的 Tab 页查看不同类别的新闻信息,每个 Tab 有对应的内容版块,点击某个选项卡时,显示对应的内容版块,隐藏其他 ...

  4. 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  5. H5点击不同按钮跳转显示不同分页

    预期效果(页面1): 点击后显示对应的内容(页面2): HTML(页面1): 添加 onclick 跟 data-index     <!-- 3我的订单 -->     <div ...

  6. JS 点击复制按钮 将文字复制到手机剪贴板

    我们在制作移动端网页的时候,经常会遇到这样一个问题,如何点击一个"复制"按钮,把一串文字复制到手机剪贴板,如上图所示. 看了网上的一些方法后,感觉那些方法都太复杂,有点要用插件,有 ...

  7. 点击Button按钮实现页面跳转

    1.首先我们新建一个带有button按钮的页面 <button type="submit" class="form-contrpl">注册</ ...

  8. js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...

  9. js点击button按钮跳转到页面代码

    点击按钮怎么跳转到另外一个页面呢?我们在网站制作中可能是需要的,因为有时我们需要做这样的效果,尤其是将按钮做成一个图片,而点击图片要跳转到新的页面时,怎么做到呢? 这样的效果可以:onclick=&q ...

随机推荐

  1. 【HANA系列】SAP HANA使用XS和HTTP创建proxy

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA使用XS和HTT ...

  2. C++笔记——类(0)定义、访问控制、友元、default、mutable、构造函数

    整理一下一些关于类的知识点,毕竟还是很经常用的(先总结一部分,太多了). 定义格式.访问控制 C++里面定义类的关键词有两个,一个是class,另一个是struct,他们基本没有区别,除了成员变量的默 ...

  3. 如何理解springcloud微服务项目中,eureka,provider,consumer它们之间的关系?

    eureka负责注册provider和consumer的服务信息 provider负责与数据库进行交互,实现数据持久化,并给consumer提供服务 consumer与前端交互,通过与Eureka同源 ...

  4. Zookeeper - zookeeper安装与配置

    1.什么时Zookeeper ZooKeeper:分布式服务框架 Zookeeper -- 管理分布式环境中的数据. 2.安装 1>官网下载压缩包并解压zookeeper-3.4.14.zip ...

  5. Process进程 ProcessStartInfo.UseShellExecute 属性

    https://docs.microsoft.com/zh-cn/previous-versions/dotnet/netframework-1.1/k7z89z41(v=vs.80) 启动进程示例: ...

  6. Docker之Harbor私服的搭建及使用

    目录 0. 前置条件 1. 下载地址 2. 安装 2.1 编辑harbor.yml 2.3 安装 2.4 访问配置的域名 2.5 常用命令 2.6 测试提交镜像 0. 前置条件 安装docker # ...

  7. numpy-数据格式之 int 与 uint

    概念 整型分为 有符号整型 和 无符号整型,其区别在于 无符号整型 可以存放的正数范围 比 有符号整型 大一倍,因为 有符号整型  将最高位存储符号,而 无符号整型 全部存储数字 # 1 111000 ...

  8. SCUT - 492 - 鬼符「搦手的鬼畜生」 - 简单数学

    https://scut.online/p/492 求[1,a]范围内的a模m的逆元的数量. 一开始用扩展欧几里得算法草了一发,WA了,当时不太清楚模非质数的周期,看来扩展欧几里得算法的笔记才知道要加 ...

  9. Codeforces 1220D. Alex and Julian

    传送门 首先考虑怎样的集合一定是合法的 发现全部是奇数的集合一定合法,因为每次都是奇数连偶数,偶数连奇数 然后考虑如果集合同时有奇数和偶数是否一定不合法,结论是一定不合法,证明如下: 设某个奇数为 $ ...

  10. RabbitMQ入门教程(五):扇形交换机发布/订阅(Publish/Subscribe)

    原文:RabbitMQ入门教程(五):扇形交换机发布/订阅(Publish/Subscribe) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. ...