js-点击tab按钮，同一页面显示不同的内容

效果：

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;

}

原文地址：https://www.cnblogs.com/snowbxb/p/11770439.html

时间： 2024-09-27 16:01:34

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

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

最近做项目遇到了这样的情况: 公司网络比平常慢了不少,在点击保存按钮提交页面后需等待挺长的一段时间,忍不住手贱点多了几次,当提交完成后发现数据库语句执行异常. 两种验证方式: 第1种: aspx页面按钮: <asp:Button ID="btnSumbit" runat="server" Text="提交" onclick="btnSumbit_Click" /> Page_Load 事件: btnSumbit.A

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

我们在制作移动端网页的时候,经常会遇到这样一个问题,如何点击一个"复制"按钮,把一串文字复制到手机剪贴板,如上图所示. 看了网上的一些方法后,感觉那些方法都太复杂,有点要用插件,有的需要安装flash,但是这些对于手机等移动设备都不太合适,那么有没有一个简单点的办法呢? 今天,我们就来介绍一个简单实用的好方法: ①首先,我们把需要复制的部分做成一个readonly的input, ②复制按钮的id 我这里设置成:js-copy-text, ③js如下: <script> $

如何在JSP页面显示mysql数据库内容（二）

用Eclipse tomcat新建一个JSP页面(一)介绍了如何创建一个web程序和第一个jsp页面,以及Eclipse需要的一些必要配置.今天,我们重点说一下如何从数据库中查询数据,并且在JSP页面显示. 首先需要注意这样一个问题: 建的如果是java项目,只需要引入mysql-connector-java-5.1.10-bin.jar就可以运行java项目.建的如果是web工程,当Class.forName("com.mysql.jdbc.Driver");时,Eclipse是不会

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

www.111cn.net 编辑:smoke 来源:转载在网页中button按钮不具备a标签的属性了,如果我们要给button 按钮增加跳转事件我们可以在它的确onclick事件上点击跳转js来实现,下面我来给大家介绍一些常用的方法. 点击按钮怎么跳转到另外一个页面呢?我们在网站制作中可能是需要的,因为有时我们需要做这样的效果,尤其是将按钮做成一个图片,而点击图片要跳转到新的页面时,怎么做到呢? 这样的效果可以:onclick="window.location=’新页面’" 来实现.

点击分页按钮使页面置顶

<!DOCTYPE html> <title>点击页面置顶</title> <meta charset ="UTF-8"> <script src="../js/jquery-3.4.1.min.js"></script> <body> <html> <div class="hidden" id="pageInfo">

无阻塞加载js，防止因js加载不了影响页面显示

浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到</body>前,防止UI线程的阻塞. 而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢,就可以用到无阻塞加载js技术. Dynamic Script Elements 动态脚本元素 DOM允许我们使用Javascript动态创建HTML的几乎所有文档内容,一个新的<script>元素可以非常容易的通过标准DOM创建: var script = document.createElem

js点击重置按钮重置表单

<html><head><script type="text/javascript">function formReset(){document.getElementById("myForm").reset()}</script></head> <body><p>在下面的文本框中输入一些文本,然后点击重置按钮就可以重置表单.</p> <form id="m

vue点击tab跳转页面，给点击的tab添加样式，且解决刷新以后点击的tab样式消失问题

<ul class="nij"> <li v-for="item in nav" @click="selectNav(item.title)"> <p :class="isSelect === item.title ? 'active' : ''">{{item.title}}</p> </li> </ul> data:function(){ return

js点击复制，复制你想复制的内容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con