效果:

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. ARM的编程模式及寄存器

    根据朱老师的课程及下面博客整理 http://blog.chinaunix.net/uid-20443992-id-5700979.html ARM 采用的是32位架构 ARM 约定: Byte : ...

  2. Java应用监控利器JMX

    啥是 JMX? The Java Management Extensions (JMX) API is a standard API for management and monitoring of ...

  3. AGC037 C Numbers on a Circle【思维】

    题目传送门 题意 这道题被某大佬改编拿来出成考试题,是长这个样子的: 好的,其实这才是真正的题意: 给定初始序列和最终序列,每次选择一个数变成自己和相邻2个数的和.问初始序列是否可以变为最终序列,若可 ...

  4. HTML协义代码

    这些状态码被分为五大类: 100-199 用于指定客户端应相应的某些动作. 200-299 用于表示请求成功. 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息. 400- ...

  5. 20191128 Spring Boot官方文档学习【目录】

    Spring Boot文档 入门 使用Spring Boot 3.1. 构建系统 3.2. 结构化代码 3.3. 配置类 3.4. 自动配置 3.5. Spring beans和依赖注入 3.6. 使 ...

  6. poj3761(反序表)

    题目链接:https://vjudge.net/problem/POJ-3761 题意:给出n和k,求通过k趟冒泡排序得到长为n的有序排列(元素为n个不同的数)的原排列有多少个. 思路: 先给出反序表 ...

  7. springMvc中获取通过注解获取properties配置文件(转)

    springMvc的项目中,通过注解@Value获取properties配置文件中的配置,使用该注解必须引入的包: spring-beans-4.1.4.RELEASE.jar 下面是需要在sprin ...

  8. import和from.…import…

    import和from.-import- 在讲之前我们先来讲一下怎样去下载第三方库,我们把python看作一部手机,pip就是应用管家,第三方库里面的模块就是应用管家里面的一个应用 一.import模 ...

  9. 利用ARouter实现组件间通信,解决子模块调用主模块问题

    如果你还没使用过ARouter请你按照这篇下面博客尝试使用下然后再往下看组件通信的内容(不然的话可能会懵逼)Android Studio接入ARouter以及简单使用 如果你使用过ARouter请继续 ...

  10. linux ssh连接超时断连设置

    以下均针对redhat6.5系统进行说明. 一.设置ssh超时断连 使用root用户,编辑/etc/profile文件,在 HOSTNAME='/bin/hostname' HISTIZE=30 后增 ...