jq实现切换tab

最新推荐文章于 2022-06-27 16:12:46 发布
最新推荐文章于 2022-06-27 16:12:46 发布
阅读量247 收藏
点赞数 1
分类专栏： JSP 文章标签： jQuery table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39933337/article/details/79863842
版权
<html>
<head>
    <title>切换tab</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />  
    <script src="../../scripts/boot.js" type="text/javascript"></script>   
    <style type="text/css"></style>
</head>
<body οnlοad="displaystudentOneTab()">//页面加载完自动执行displaystudentOneTab方法，默认显示第一个tab
<form id="studentForm" name="studentForm" method="post" style="margin:0 -10px">
<table  style="width:100%;margin-top:20px;" cellspacing="1" cellpadding="1" border="0" align="center">
  <tr>
<td>
  <table id="tabTable">
<tr>
  <td id="studentOneTab" οnclick="displaystudentOneTab()">
第一个tab
  </td>
  <td id="studentTwoTab" οnclick="displaystudentTwoTab();">
第二个tab
  </td>
  <td id="studentThreeTab" οnclick="displaystudentThreeTab()">
第三个tab
  </td>
  <td id="studentTourTab" οnclick="displaystudentTourTab()">
第四个tab
  </td>
</tr>
  </table>
</td>
  </tr>
</table>
<div id="studentOneDiv" style="width:100%;margin: 0 auto;display:none"><table border="1" style="width:50%;"  id="class_one">
  <tr>
    <td>姓名</td>
 <td><input name="editName" id="editName" value="小明"/></td>
  </tr>   
  <tr>
    <td>性别</td>
    <td><input name="editGender" id="editGender" value="男" /></td>
  </tr>
  <tr>
<td >年龄</td>
<td><input name="editAge" id="editAge" value="21" /></td>
  </tr>
  <tr>
<td >学号</td>
<td><input name="editNumber" id="editNumber" value="Q100" /></td>
  </tr>
  <tr>
<td>
  <span>  
<a href="#" id="addStudent" οnclick="add_Student(this);return false;">添加</a>
  </span>
</td>
  </tr>
</table></div>
<div id="studentTwoDiv" style="width:100%;margin: 0 auto;display:none"><table border="1" style="width:50%;"  id="class_two">
  <tr>
    <td>姓名</td>
 <td><input name="editName" id="editName" value="小张"/></td>
  </tr>   
  <tr>
    <td>性别</td>
    <td><input name="editGender" id="editGender" value="男" /></td>
  </tr>
  <tr>
<td >年龄</td>
<td><input name="editAge" id="editAge" value="217" /></td>
  </tr>
  <tr>
<td >学号</td>
<td><input name="editNumber" id="editNumber" value="Q140" /></td>
  </tr>
  <tr>
<td>
  <span>  
<a href="#" id="addStudent" οnclick="add_Student(this);return false;">添加</a>
  </span>
</td>
  </tr>
</table></div>
<div id="studentThreeDiv" style="width:100%;margin: 0 auto;display:none"><table border="1" style="width:50%;"  id="class_three">
  <tr>
    <td>姓名</td>
 <td><input name="editName" id="editName" value="小芳"/></td>
  </tr>   
  <tr>
    <td>性别</td>
    <td><input name="editGender" id="editGender" value="女" /></td>
  </tr>
  <tr>
<td >年龄</td>
<td><input name="editAge" id="editAge" value="23" /></td>
  </tr>
  <tr>
<td >学号</td>
<td><input name="editNumber" id="editNumber" value="Q100" /></td>
  </tr>
  <tr>
<td>
  <span>  
<a href="#" id="addStudent" οnclick="add_Student(this);return false;">添加</a>
  </span>
</td>
  </tr>
</table></div>
<div id="studentTourDiv" style="width:100%;margin: 0 auto;display:none"><table border="1" style="width:50%;"  id="class_one">
  <tr>
    <td>姓名</td>
 <td><input name="editName" id="editName" value="小辉"/></td>
  </tr>   
  <tr>
    <td>性别</td>
    <td><input name="editGender" id="editGender" value="男" /></td>
  </tr>
  <tr>
<td >年龄</td>
<td><input name="editAge" id="editAge" value="21" /></td>
  </tr>
  <tr>
<td >学号</td>
<td><input name="editNumber" id="editNumber" value="Q100" /></td>
  </tr>
  <tr>
<td>
  <span>  
<a href="#" id="addStudent" οnclick="add_Student(this);return false;">添加</a>
  </span>
</td>
  </tr>
</table></div>

</form>

JS部分：

<script type="text/javascript">
function displaystudentTwoTab() {
$("#studentTwoDiv").show();//选中的显示，其余的隐藏
$("#studentTwoTab").css({"background-color":"#50ffba"});//加以颜色区分
$("#studentThreeTab").css({"background-color":"#F5F5F5"});
$("#studentTourTab").css({"background-color":"#F5F5F5"});
$("#studentOneTab").css({"background-color":"#F5F5F5"});
$("#studentThreeDiv").hide();
$("#studentTourDiv").hide();
$("#studentOneDiv").hide();
}
function displaystudentThreeTab() {
$("#studentTwoDiv").hide();
$("#studentThreeDiv").show();
$("#studentThreeTab").css({"background-color":"#50ffba"});
$("#studentTwoTab").css({"background-color":"#F5F5F5"});
$("#studentTourTab").css({"background-color":"#F5F5F5"});
$("#studentOneTab").css({"background-color":"#F5F5F5"});
$("#studentTourDiv").hide();
$("#studentOneDiv").hide();
}
function displaystudentTourTab() {
$("#studentTwoDiv").hide();
$("#studentThreeDiv").hide();
$("#studentTourDiv").show();
$("#studentTourTab").css({"background-color":"#50ffba"});
$("#studentThreeTab").css({"background-color":"#F5F5F5"});
$("#studentTwoTab").css({"background-color":"#F5F5F5"});
$("#studentOneTab").css({"background-color":"#F5F5F5"});
$("#studentOneDiv").hide();
}
function displaystudentOneTab() {
$("#studentOneDiv").show();
$("#studentOneTab").css({"background-color":"#50ffba"});
$("#studentTourTab").css({"background-color":"#F5F5F5"});
$("#studentThreeTab").css({"background-color":"#F5F5F5"});
$("#studentTwoTab").css({"background-color":"#F5F5F5"});
$("#studentTwoDiv").hide();
$("#studentThreeDiv").hide();
$("#studentTourDiv").hide();
}
</script>
</body>
</html>
代码刺客
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jq实现简单的tab切换效果
小利的博客
09-09 1354
html部分： <div id="tabhead" class="tabhead"> <span class="tab" data-id="remote">插入图片</span> <span class="tab focus" data-id="upload">本地上传</span> <span class="tab" data-id="online">在线管理</span>
jquery实现tab切换简单好用
最新发布
weixin_52168983的博客
07-28 2259
网上很多tab切换的方法，很多比较复杂，我写了一个非常简单实用的。主要通过display：none，block。以及类选择器来实现。首先引入jquery。
jQuery——Tab栏切换
NanChen的博客
06-27 5658
简单tab栏切换实现 效果如下： 完整代码：
JQuery实现table切换
渔夫
06-10 2911
html 部分： <ul id="ul"> <li>1</li> <li>期初商品库存</li> <li>期初应收款</li> </ul> <div id="div"> <div style="display:block;">1</div> ...
【jquery】table切换页面
null_NaN的博客
08-26 1252
一、table切换 效果：table导航选项对应的内容显示与隐藏； 思想：主要利用选项的index值去寻找对应的内容模块，显示该模块，其余的模块都隐藏，最后选中的选项设置一些特殊的样式以表明显。 订单列表 *{ margin: 0; padding: 0; } html body { width: 100%; height: 100%; /* font-size: 16px; */ } #news {
用jQuery实现table切换
zgq_sir的博客
01-08 518
首先将html标签写出 <div class="tabs"> <div class="title active">标题1</div> <div class="title">标题2</div> <div class="title">标题3</div> <div class="content">内容...
JQ版tab切换，三个格式切换效果
05-30
"JQ版tab切换"就是一种常见的前端交互元素，用于展示多个内容区域，用户可以通过点击不同的标签来切换显示不同的内容。这种功能常见于网站的导航、产品介绍、用户设置等场景，能有效提高页面的易用性和信息的组织性...
jQuery简单实现tab选项卡切换效果
10-22
主要介绍使用jQuery封装了一个tab选项卡切换的插件，需要的朋友可以参考下。
JQ tab标签切换
08-12
典型的JQ Tab实现可能如下： ```html <li><a href="#tab1">标签1</a></li> <li><a href="#tab2">标签2</a></li> <li><a href="#tab3">标签3</a></li> <div id="tab1" class="content">内容1 <div id="tab...
jquery渐变切换tab标签
06-10
对于"jQuery 渐变切换Tab标签"，其核心在于利用jQuery的事件监听和CSS样式修改来实现色彩渐变的切换效果。具体步骤如下： 1. **HTML结构**：首先，我们需要设置HTML结构，包括Tab的标题（通常用`<li>`元素包裹）和...
jq遍历table切换
11-29
利用jq遍历制作的简单的table切换效果，利用此资源可以在比较大的需要table切换效果时减少jq代码，以此来优化界面。
table切换js
04-18
一个底部导航加电话，自己写的商务通，希望对大家有用处谢谢谢谢
jquery table(切换标签)
01-30
封装了切换代码，可以同个页面实现多个标签切换
html 实现tab切换的示例代码
11-19
本文将介绍两种纯CSS实现Tab切换的方法。 ### 方法一：基于Label和Input的Radio类型 这种方法利用了HTML的`<label>`标签和`<input type="radio">`的关联性。以下是如何实现的步骤： 1. 创建一个具有类名`wrap`的`...
jQuery制作tab选项卡
weixin_44886806的博客
05-18 1754
用jQuery来制作tab的选项卡。 说白了就是切换到别的选项，已简单的例子来说，先写出样式. CSS部分: <style> ul,li{ list-style: none; margin: 0; padding: 0; } .nav { width: 80%; line-height: 48px; background: #f6f8fa; overflow: hidden;
使用jQuery实现table的分页
热门推荐
灵活大胖子HDG 的博客
03-22 1万+
步骤与代码 一、创建一个表格如下： <table cellspacing="0"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>排行</th> ...
jquery+原生HTML——实现table表格切换
七月❤的博客
04-13 816
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <style> .mod-tab .tab{ float:left; paddi.
Jquery + Tab + Bootstrap Table 多个table叠加问题
芃蓉蓁蓁的博客
12-07 1081
说明：一个页面多个bootstrap-table时，一些默认id就会冲突，比如控制搜索框的formId，以及table的默认id：bootstrap-table，还有控制添加、删除按钮的id：toolbar，这些都可以自定义。 搜索、重置按钮无效？ 添加自定义的formId参数 <form id="formId_user"> <!--搜索按钮事件--> οnclick="$.table.search('formId_user')" <!--重置按钮事件--> οnc
jQuery学习笔记(2)--table标签切换
为梦想而奋斗，无悔_一叶扁舟的点滴成长！
03-18 2022
当鼠标放在不同的table标签上时，下面的页面进行相应的变换。 html代码： tab标签的切换 body,div,ul,li,ol,dl,dt,p,dd,img,input,a,span,h1,h2,h3,h4{padding:0; margin:0; border:0; list-style:none;} .wrapper{
jq实现tab切换效果
05-27
可以使用jQuery来实现tab切换效果，具体实现步骤如下： 1. HTML结构 首先需要准备一个tab的HTML结构，一般是一个ul列表和对应的内容div组成，例如： ``` <ul class="tab-nav"> <li class="active">Tab 1 <li>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值