<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 </head>

 <body style="margin:50px 0;">

 <div style="float:left; margin:0 auto; width:800px; padding-left:40px; line-height:25px;" >

   <ul>

    <li>

    <a href="javascript:showDiv('id2');">显示id1的内容</a>

   </li>

   <li>

    <a href="javascript:showDiv('id1');">显示id2的内容</a>

   </li>

   <li>

    <a href="javascript:showDiv('id3');">显示id3的内容</a>

   </li>

   </ul>

 </div>

 <div id="id1" align="center" style="display:" >

 1111111111111111<a href="javascript:showDiv('id2');">我是id1内容的a链接，点击可回到id2的内容---显示id2内容</a>

 </div>

 <div id="id2" align="center" style="display:none" >

 222222222222222222222<a href="javascript:showDiv('id1');">我是id2内容的a链接，点击可回到id1的内容---显示id1内容</a>

 </div>

 <div id="id" align="center" style="display:none" >

 333333333333333333我是id3内容

 </div>

 <script language="javascript">

 function showDiv(objId){

  var objDiv=document.getElementById(objId);

     var objDiv1=document.getElementById("id1");

  var objDiv2=document.getElementById("id2");

  var objDiv3=document.getElementById("id3");

   objDiv1.style.display="none";

   objDiv2.style.display="none";

   objDiv3.style.display="none";

         objDiv.style.display="";

 }

 </script>

 </body>

 </html>

js通过a链接控制多个DIV只显示其中一个其它隐藏的更多相关文章

  1. div 只显示两行超出部分隐藏

    ; -webkit-box-orient: vertical;line-height: 26px } <td rowspan="2" colspan="2" ...

  2. jq与js的写法，示例回到顶部div滚动显示隐藏

    jq:var top_icon = $('.top_icon')[0]; id写法$('#id'),类写法$('.class'),标签写法$('div') 如:join=document.getEle ...

  3. 前端笔记：div只显示两行内容，多出内容以...显示

    代码: text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-bo ...

  4. JS使用cookie实现DIV提示框只显示一次的方法

    本文实例讲述了JS使用cookie实现DIV提示框只显示一次的方法.分享给大家供大家参考,具体如下: 这里运用JavaScript的cookie技术,控制网页上的提示DIV只显示一次,也就是当用户是第 ...

  5. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js 控制展开折叠 div html dom

    js 控制展开折叠 div    html dom <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...

  7. js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  8. 原生JS的移入溢出控制div的显示与隐藏

    原生JS的移入溢出控制div的显示与隐藏的写法 上面的写法火狐存在兼容性

  9. 利用JS做到隐藏div和显示div

    div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 style="visibility: none;" document.getElementById( ...

随机推荐

  1. CentOS持久化二进制日志(systemd日志)

    1.创建日志存储文件 /var/log/journal 2.改变存储文件属主属组 chown root:systemd-journal /var/log/journal/ 3.修改文件权限 chmod ...

  2. 使用AOP的好处

    原始代码的写法 既然要通过代码来演示,那必须要有例子,这里我的例子为: 有一个接口Dao有insert.delete.update三个方法,在insert与update被调用的前后,打印调用前的毫秒数 ...

  3. WPF基础篇之资源文件路径

    WPF资源文件的路径 关于WPF资源文件的路径 这几天在WPF中调用资源文件的Uri时,因为是在代码里调用Uri写的Uri总是不对,要么运行直接报异常,要么说找不到资源文件.下面是我解决的整个经过和碰 ...

  4. js 数组去重常见的几种方式

    1.利用标记 var arr = [2,6,2,6,4,3,16];// arr = [2,6,4,3,16] function norepeat(arr){ var res = []; for(va ...

  5. 在Service中抛出异常事务未回滚问题分析与解决

    1.问题提出:在service中写方法时,抛出了一个Exception, 本来目的是为了让事务回滚, 但事实上没有回滚,产生了脏数据.代码如下:@Override@Transactionalpubli ...

  6. SpringBoot初探之Swagger配置

    Swagger是一个用于描述和测试restful接口的工具,只要在定义restful接口时增加一些类和方法的描述注解,通过很简单的配置就可以得到一个展示接口定义页面,也可以在页面上设置参数提交测试接口 ...

  7. HDFS配额管理（实战）

    概述: Hadoop分布式文件系统(HDFS)允许管理员为使用的名称和单独目录使用的空间数量设置配额.名称配额和空间配额是独立运作的,但这两类配额的管理和实施是密切相关的. Name Quotas: ...

  8. linux 添加ftp用户与登录配置详解

    不同类Unix有一定区别 版本不同也有些区别 在linux主机上如何添加ftp用户 (一)修改配置文件 vi /etc/vsftpd/vsftpd.conf 在96行,97,98行 96 chroot ...

  9. 20.1章JSON语法

    1,语法 JSON有三种类型的值 简单值:使用与JavaScript相同的语法,可以在JSON中表示字符串,数值,布尔值,null.但是JSON不支持JavaScript中特殊的值undefined. ...

  10. java--Object类接受任意引用数据类型对象

    java学习进展到类,首先就对万类之父Object类进行举例练习,这里我是对一维数组和接口用Object接受数组和接口. package test1; public class enum1 { pub ...