table切换代码

最新推荐文章于 2023-12-11 23:09:30 发布
最新推荐文章于 2023-12-11 23:09:30 发布
阅读量1.1k 收藏
点赞数
分类专栏： 网页基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ghs2599/article/details/9140399
版权


table切换代码片段

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus" charset="utf8">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
<script type="text/javascript">

function table(cid) {
	var ps = ['ctab1','ctab2'];
	for (var i = 0 ;len = ps.length ;i < len,i++)
	{	if(ps[i] == cid) {
		document.getElementById(ps[i]).style.display = "block";
		document.getElementById('tab1').style.background = "gray";
		document.getElementById('tab2').style.background = "red";
		} else {
		document.getElementById(ps[i]).style.display = "none";
		document.getElementById('tab2').style.background = "gray";
		document.getElementById('tab1').style.background = "red";
		}
	}
}
</script>
<style type="text/css">
    .right{width:246px;height:334px;border:1px solid red;font-size:14px;margin:0px;padding:0px;}
    .right h3 {display:inline;height:35px;width:123px;}
    .right ul {list-style-type:none;margin:0px;padding:0px;}
	#ctab2 {display:none;}
	#tab1 {background:url(./images/titlebg2.jpg);}
	#tab2 {background:url(./images/titlebg2.jpg);}
</style>
<body>
<div class="right">
	<h3 id="tab1" οnmοuseοver="table('ctab1')"><a href="#">公司新闻</a></h3>
	<h3 id="tab2" οnmοuseοver="table('ctab2')"><a href="#">行业新闻</a></h3>
	<div>
		<ul id="ctab1" >
			<li><a href="/gsxw/list_92.html">DedeCMS V5.6 开发日志</a><span>[ 2010-04-07 ]</span></li>
			<li><a href="/gsxw/list_11.html">新手学习老知识（</a><span>[ 2010-04-07 ]</span></li>
			<li><a href="/gsxw/list_12.html">新手学习老知识（</a><span>[ 2010-04-07 ]</span></li>
			<li><a href="/gsxw/list_13.html">新手学习老知识（</a><span>[ 2010-04-07 ]</span></li>
			<li><a href="/gsxw/list_14.html">HTML网页初学者教程</a><span>[ 2010-04-07 ]</span></li>
			<li><a href="/gsxw/list_15.html">网页文本排版知识</a><span>[ 2010-04-07 ]</span></li>
			<li><a href="/gsxw/list_17.html">快速精通网页框架</a><span>[ 2010-04-07 ]</span></li>
			<li><a href="/gsxw/list_18.html">浅谈XHTML（可扩展</a><span>[ 2010-04-07 ]</span></li>
			<li><a href="/gsxw/list_19.html">HTML基础知识：学习</a><span>[ 2010-04-07 ]</span></li>
		</ul>
		<ul id="ctab2">
			<li><a href="/hyxw/list_1.html">学习HTML 4.0事件属</a><span>[ 2010-04-07 ]</span></li>
			<li><a href="/hyxw/list_2.html">初学者：XHTML常用</a><span>[ 2010-04-07 ]</span></li>
			<li><a href="/hyxw/list_3.html">网页中应用表格爱</a><span>[ 2010-04-07 ]</span></li>
			<li><a href="/hyxw/list_4.html">初学者很好的参考</a><span>[ 2010-04-07 ]</span></li>
			<li><a href="/hyxw/list_5.html">实例学习网页制作</a><span>[ 2010-04-07 ]</span></li>
			<li><a href="/hyxw/list_6.html">网页制作初学者：</a><span>[ 2010-04-07 ]</span></li>
			<li><a href="/hyxw/list_7.html">对于初学者不错的</a><span>[ 2010-04-07 ]</span></li>
			<li><a href="/hyxw/list_8.html">介绍span和div标签的</a><span>[ 2010-04-07 ]</span></li>
			<li><a href="/hyxw/list_9.html">HTML教程：建立超级</a><span>[ 2010-04-07 ]</span></li>
		</ul>
	</div>
</div>
</body>
</html>


ghs2599
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
table切换最简代码
12-03
table切换，通过改变class改变其样式，。
jquery table(切换标签)
01-30
封装了切换代码，可以同个页面实现多个标签切换
table切换
小井的博客
02-21 794
页面上代码 li class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2160 current_page_item bit-menu-post-id-2160 menu-item-2319 first">a href="{{$val->h
JavaScript实现tab切换
hongchen_lian的博客
01-08 760
JavaScript实现table切换 实现效果 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tab点击切换</title> <style type="text/css"> *{ margin: 0;...
table示例代码
06-15
table中的各个标签与属性的示例代码展示。大家可以用来参考下
jq遍历table切换
11-29
"jq遍历table切换"就是这样一个功能，它通过简洁的jQuery代码实现表格内容的动态切换，以达到优化界面的目的。 首先，我们需要了解jQuery的基本用法。jQuery是一个高效、简洁的JavaScript库，它简化了HTML文档遍历...
table 切换 上移
09-11
简单的table的table的上移 核心代码 使用的jqeury的实现的 连接后他可行 简单的table的table的上移 核心代码 使用的jqeury的实现的 连接后他可行简单的table的table的上移 核心代码 使用的jqeury的实现的 连接后他...
vue各种table切换
03-04
以上是关于“vue各种table切换”的核心知识点，实践中可能需要结合具体需求进行调整和优化。通过这些知识，你应该能实现各种各样的表格切换效果和功能，为用户提供丰富的交互体验。在实际项目中，记得根据压缩包中的...
免费下载bootstrap_table参考代码.rar
12-13
这个压缩包 "免费下载bootstrap_table参考代码.rar" 包含了用于学习和应用 Bootstrap Table 的示例代码，可以从百度云转存到 CSDN 下载。 Bootstrap Table 提供了一套灵活、响应式的表格解决方案，使得在网页上展示...
h5里常用的table切换、轮播图的简单模板
jwl18236975853的博客
05-01 2886
一：table栏切换简单模板 1.1：首先定义几个必须用到的css样式 当h5的标签被添加show类别的时候，就会显示；当h5里的标签被添加hidden_样式的时候就会被隐藏。 ​ ​ ​ .hidden_{ display：none； } .show{ display：block； } ​.active{ color:red; } ​ ​ 给出作为公共元素使用的几个h5标签 <d...
Table切换功能.rar
06-19
网站Table切换样式
table切换js
04-18
一个底部导航加电话，自己写的商务通，希望对大家有用处谢谢谢谢
table切换例子
11-16
table切换的简单例子,模板例子,样例,方便开发
jquery+原生HTML——实现table表格切换
七月❤的博客
04-13 824
<!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.
普通table表格样式及代码大全
bangxionger9224的博客
03-15 808
普通table表格样式及代码大全(全)(一) 单实线边框表格 <table style="border-collapse: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1> <tbody> ...
Table栏切换
涩的博客
06-24 6768
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可多次使用的jQuery tab选项卡</title> <style ty...
table切换效果
weixin_30315435的博客
06-30 274
html、css代码： <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="Content-Language" content="zh-CN"><title>Tab切换效果</title><s...
一段js动态操作table代码
jianfpeng241241的专栏
05-25 465
1 查找表对象 /** * 查找对象 * */ function findObj(theObj, theDoc) { var p, i, foundObj; if(!theDoc) theDoc = document; if( (p = theObj.indexOf("?")) > 0 && parent.frames.length) { theDoc = parent.fram
Table代码详解
最新发布
qq_47140520的博客
12-11 92
/顶部 60 , 内容区域距离顶部 20， 内容上下内间距 15*2 分页区域高度 46。fetch: Function, // 获取数据的函数。--selection选择框-->//将子组件暴露出去，否则父组件无法调用。label="序号"
我要table栏切换代码
05-05
以下是一个简单的 table 栏切换代码，你可以根据自己的需求进行修改和优化： HTML: ```html (event, 'tab1')">Tab 1 (event, 'tab2')">Tab 2 (event, 'tab3')">Tab 3 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值