效果:

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. LeetCode.1046-最后的石头重量(Last Stone Weight)

    这是小川的第388次更新,第418篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第250题(顺位题号是1046).有一个石头集合,每个石头都有一个正整数重量值. 每次,我 ...

  2. pip提示ModuleNotFoundError: No module named 'pkg_resources'

    卸载setuptools后,pip下载python包一直提示ModuleNotFoundError: No module named 'pkg_resources',如下图: 在网上找了很多贴了都无法 ...

  3. JAVA 编程思想一

    1: 动态绑定和静态绑定 使用private或static或final修饰的变量或者方法,使用静态绑定.而虚方法(可以被子类重写的方法)则会根据运行时的对象进行动态绑定: 静态绑定使用类信息来完成,而 ...

  4. 【嵌入式开发】树莓派h264实时视频监控

    FishXX之前用VLC串流输出视频,在电脑上需要VLC播放器.试了一下,感觉还是有点延时. 今天发现一个更加流畅,也不需要VLC播放器的树莓派远程视频监控方法,直接在浏览器中打开即可. 地址:htt ...

  5. linux中/etc/profile 和 ~/.bash_profile 的区别

    在 linux中设置环境变量一般使用bash_profile进行配置 其中/etc/bash_profile 表示系统整体设置 ,生效后系统内所有用户可用而 ~/.bash_profile 只表示当前 ...

  6. redis 有序集合

    添加 zadd keyword 0 'eric' 0 'zhang' 0 'yun' 查看列表   zrevrange 降序排列   zrevrange keyword 0 -1 增加分数 zincr ...

  7. python 序列 转换 各种操作

    # 数据结构 字符串 列表 元组 数字序列# 10-19的整数# r1 = range(10,20)# print(r1)# print(type(r1))## # 19# print(r1[9])# ...

  8. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

  9. Linux知识补课

    Linux补课 已经将开发环境转Linux了(当然用的是ubuntu,图像界面还是舒服一点,支持也多),不上QQ和微信的话用的还是挺舒服的,但是无奈基础欠账太多,这里赶快补一下 Linux和Unix的 ...

  10. MongoDB 学习小笔记

    1.配置:mongod --dbpath=D:\MongoDB\data mongo2.基本的增删查改 find() update()-- 整体更新,局部更新. 修改器: $inc db.person ...