<!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. es6的新特性--模板字符串

    这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...

  2. 【原】从零开始改造淘淘商城（引入dubbo解决项目耦合）02

    前言: 关于为什么要引入dubbo框架,而不是用spring cloud或者是motan呢,主要是笔者现在公司用的就是dubbo,并且第一次接触到微服务的概念是来源于dubbo,再加上最近dubbo频 ...

  3. MyEclipse 2014专业版的破解--Windows系统的软件安装

    一.破解前的准备 MyEclipse2014破解包: 您可以到计算机相关专业所用软件---百度云链接下载中找到链接地址进行下载. 二.破解步骤 1.打开破解文件资源包 2.执行run.bat 3.输入 ...

  4. ssm整合快速入门程序(三)之Data类型转换器

    今天就写写springmvc配置Data类型转换器 首先在创建一个转换器的包cn.my.ssm.controller.converter,创建一个CustomDateConverter类实现Conve ...

  5. [Luogu2973][USACO10HOL]赶小猪

    Luogu sol 首先解释一波这道题无重边无自环 设\(f_i\)表示\(i\)点上面的答案. 方程 \[f_u=\sum_{v,(u,v)\in E}(1-\frac PQ)\frac{f_v}{ ...

  6. 【网络流24题21】最长k可重区间集问题

    题面戳我 题目描述 对于给定的开区间集合I和正整数k,计算开区间集合I的最长k可重区间集的长度. 输入格式: 的第 1 行有 2 个正整数n和k,分别表示开区间的个数和开区间的可重迭数.接下来的 n行 ...

  7. LightOJ1370 Bi-shoe and Phi-shoe

    题意 给出一些数字,对于每个数字找到一个欧拉函数值大于等于这个数的数,求找到的所有数的最小和. Solution 线性筛出phi,把询问数组排序搞就行了 # include <bits/stdc ...

  8. 锐动视频SDK在金融业务加密双录管理系统通用解决方案

    为了更好地保障消费者的合法权益,银监会和保监会提出了要求,在银行.保险从业人员销售理财产品或代理其他机构销售产品时,同期进行录音录像,确保销售人员按程序.按规定介绍产品,以便购买者更清楚地了解产品的性 ...

  9. 用注解的方式实现Mybatis插入数据时返回自增的主键Id

    一.背景 我们在数据库表设计的时候,一般都会在表中设计一个自增的id作为表的主键.这个id也会关联到其它表的外键. 这就要求往表中插入数据时能返回表的自增id,用这个ID去给关联表的字段赋值.下面讲一 ...

  10. Angular：Reactive Form的使用方法和自定义验证器

    本文将介绍Angular(Angular2+)中Reactive Form的有关内容,包括: Reactive Form创建方法 如何使用验证 自定义验证器 下面开始进入正文! Reactive Fo ...