效果：

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. Java 浮点数的范围和精度

    本篇先介绍IEEE754标准中针对浮点数的规范,然后以问答形式补充有关浮点数的知识点. (一)IEEE754标准 IEEE 754 标准即IEEE浮点数算术标准,由美国电气电子工程师学会(IEEE)计 ...

  2. （转）在Kubernetes集群中使用JMeter对Company示例进行压力测试

    背景 压力测试是评估应用性能的一种有效手段.此外,越来越多的应用被拆分为多个微服务而每个微服务的性能不一,有的微服务是计算密集型,有的是IO密集型. 因此,压力测试在基于微服务架构的网络应用中扮演着越 ...

  3. Mac 如何将apache的这个默认目录更改到用户目录下

    如何将apache的这个默认目录更改到用户目录下. 做如下更改即可: 1.在自己的用户目录下新建一个Sites文件夹,我的用户目录为gaocuili 2.进到cd /etc/apache2/users ...

  4. Office_Word使用技巧大全（超全）

    目录 不收藏不行的 word 使用技巧大全 三招去掉页眉那条横线 批量转换全角字符为半角字符 快速打开最后编辑的文档 格式刷的使用 删除网上 下载 资料的换行符(象这种 "↓" ) ...

  5. 为 JS 的字符串，添加一个 format 的功能。

    <script> String.prototype.format = function (kwargs) { var ret = this.replace(/\{(\w+)\}/g, fu ...

  6. linux操作系统安装运行Redis

    Redis是c语言开发的. 安装redis需要c语言的编译环境.如果没有gcc需要在线安装.yum install gcc-c++ 安装步骤: 1.安装gcc      yum install gcc ...

  7. springBoot2.0配置profile

    1. 使用yaml来配置,直接配置application.yml文件 server: port: 8888 spring: profiles: active: dev # 激活生产环境 --- # 测 ...

  8. 中值滤波器（平滑空间滤波器）基本原理及Python实现

    1. 基本原理 一种典型的非线性滤波器就是中值滤波器,它使用像素的一个领域内的灰度的中值来代替该像素的值.中值滤波器通常是处理椒盐噪声的一种有效的手段. 2. 测试结果 图源自skimage 3. 代 ...

  9. scala学习笔记(1)

    scala ------------------------- java语言脚本化 1.安装scala-2.12.1.msi 2.进入到scala的命令行 3.Tab键会有补全的功能 1.scala程 ...

  10. springmvc中的视图模型的返回方式

    way1:略过; way2:(神似way1)通过在方法的参数中添加一个Model类型的参数,,该参数由spring自动生成传入, 然后在方法内部使用addAttribute()方式添加模型数据, 最后 ...