html页面,左边点击链接,右边显示内容参考代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function funcShow(id){
for(var i=0;i<5;i++){
var divInfo =document.getElementById('div'+(i+1));
divInfo.style.display='none';
}
var div =document.getElementById('div'+id);
div.style.display='block';
}
</script>
</head>
<body>
<table width="632" border="1">
<tr>
<td width="66"><a href="javascript:funcShow(1)">1 </a></td>
<td width="550" colspan="4" rowspan="5">
<div id="div1" style="display:block">此处显示id "div1" 的内容aaaaaaaaaaa</div>
<div id="div2" style="display:none">此处d "div2" 的内容</div>
<div id="div3" style="display:none">此处显示id "di 容</div>
<div id="div4" style="display:none">此处显ccccccccccv4" 的内容</div>
<div id="div5" style="display:none">此处显示 bbbbbbbbbbb" 的内容</div></td>
</tr>
<tr>
<td><a href="javascript:funcShow(2)">2 </a></td>
</tr>
<tr>
<td><a href="javascript:funcShow(3)">3 </a></td>
</tr>
<tr>
<td><a href="javascript:funcShow(4)">4 </a></td>
</tr>
<tr>
<td><a href="javascript:funcShow(5)">5 </a></td>
</tr>
</table>
</body>
</html>
html页面,左边点击链接,右边显示内容参考代码。的更多相关文章
- ifram的使用 左边是<a>链接 右边是对应网页嵌套的显示网页链接内容 和toggle的收放用法
1.ifram的使用 左边是<a>链接 右边是对应网页嵌套的显示网页链接内容 <div class="container"> <div class= ...
- 仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边
先上效果图: 实现思路: 1.先说右边标题: 首先,右边的数据源集合中的Javabean中含有三个属性name,type,title,而每个条目中会默认含有一个标题. 如果这是第一个条目,就让标题显示 ...
- 【jQuery02】点击标题面板显示内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Vue 实现左边导航栏且右边显示具体内容(element-ui)
最终效果图: 现在开始进入正题: 1.安装element-ui npm i element-ui -S CDN 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引 ...
- js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标
原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...
- hexo next主题中关于pc端点击链接没问题,移动端点击链接页面不显示。
个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景 hexo next主题,本人diy的时候 ...
- 用A标签实现页面内容定位 点击链接跳到具体位置
经常在维基百科等网站看到目录列表,点击链接会跳到具体的位置,小美眉一直在问是怎么做到的,其实挺简单的,用A标签实现页面内容定位就行了.实例参考微信营销理论手册的目录. 首先用A标签定义目录的链接. & ...
- ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面,各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目
ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...
- 让超链接点击后不跳转,可以用href = "#",但是这个#就会锚点到页面最上边 点击链接后不跳转可以设置成
让超链接点击后不跳转,可以用href = "#",但是这个#就会锚点到页面最上边 点击链接后不跳转可以设置成 1.<a href="javascri ...
随机推荐
- Android图形系统之Surface、SurfaceView、SurfaceHolder及SurfaceHolder.Callback之间的联系
1.Surface Surface extends Objectimplements Parcelable java.lang.Object ↳ android.view.Surface Cla ...
- linux 开启wifi热点
1,在网络连接管理中创建一个wifi连接,点击 Add,然后选Wi-Fi 2,设置wifi热点名字.wifi接连名字 3,设置 Mode 选 Ad-hoc,其它默认. 4,在 Wi-Fi Securi ...
- 一、安装JDK和Tomcat
一.安装JDK和Tomcat 1,安装JDK:直接运行jdk-7-windows-i586.exe可执行程序,默认安装即可. 备注:路径可以其他盘符,不建议路径包含中文名及特殊符号. 2.安装Tomc ...
- linux下查看分区信息和剩余空间大小
1. 查看Linux系统分区信息,使用命令“fdisk -l” 2.使用命令”df -l和df -h“具体查看分区使用状况.实际这两个命令具有一样的作用区别是显示的容量单位不一样,当然也可以直接使用明 ...
- SqlSever基础 rtrim函数 除去字符串的右边的空格,左边中间的不管
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- hdu4992 Primitive Roots(所有原根)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4992 题意:给出n,输出n的所有原根. 思路:求出n的一个原根x,那么对于所以的i,i<phi( ...
- ORACLE分页SQL语句
.根据ROWID来分 select * from t_xiaoxi where rowid in(select rid from (select rownum rn,rid from(select r ...
- 【转载】Linux系统启动流程
原文:Linux系统启动流程 POST(Power On Self Test/上电自检)-->BootLoader(MBR)-->Kernel(硬件探测.加载驱动.挂载根文件系统./sbi ...
- FreeSWITCH 1.6在Debian 8上的安装
鉴于上次在CentOS 7上安装不成功,这次换Debian. 现在已经成功的CentOS 7上安装好了. 感兴趣的同学移步https://freeswitch.org/confluence/displ ...
- WebRTC的学习(一)
这篇文章是我翻译mozilla上的英文资料. 英文原文的链接地址为https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API/Protoco ...