js点击切换不同div

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
  function switchItem(tag){
   var s1 = document.getElementById(‘s1‘);
   var s2 = document.getElementById(‘s2‘);

   if(tag==‘外单位‘){
    s1.style.display = ‘‘;
    s2.style.display = ‘none‘;

   }
   else{
    s1.style.display = ‘none‘;
    s2.style.display = ‘‘;

   }
  }
</script>
<div>
 <label><input type="radio" onclick="switchItem(‘外单位‘)" name="radio" />外单位</label>
 <label><input type="radio" onclick="switchItem(‘本单位‘)" name="radio" />本单位</label>
</div>

<div>
 <select id="s1" style="display:none">
  <option>外单位A1</option>
  <option>外单位A2</option>
  <option>外单位A3</option>
 </select>
</div>
<div>
 <select id="s2" style="display:none">
  <option>本单位A1</option>
  <option>本单位A2</option>
  <option>本单位A3</option>
 </select>
</div>
</body>
</html>

  实际应用中的方法

function switchItem(tag,num,j){
   var s1 = document.getElementById(‘tabs‘+num+j);
   var s2 = document.getElementById(‘tabsw‘+num+j);
   if(tag==‘1‘){
     s1.style.display = ‘none‘;
     s2.style.display = ‘‘;
	 $("#mandatory"+num+j).attr("value","1");
	 var  id=$("#mandatory"+num+j).val();

   }else{
     s1.style.display = ‘‘;
     s2.style.display = ‘none‘;
	 $("#mandatory"+num+j).attr("value","0");
   }
}

  

时间: 2024-12-20 07:31:54

js点击切换不同div的相关文章

原生JS编写图片切换效果和点击按钮的样式变化

这两天更进一步的了解了JS,老师让我们用原生的js编写图片切换和改变点击按钮样式,就是让我们学会怎么去把一个问题拆分,怎么将一个大问题拆分成许多的小问题,再用函数封装起来.比如一个点击按钮,让其点击时背景色发生改变,点击另一个时,上一个按钮要变回原来本有的颜色:这个问题用jquery,一行代码就搞定,但是用原生js就得分三个部分来考虑: 1.添加改变背景的样式. 2.怎么获取到除了当前点击的按钮以外其他的兄弟节点. 3.怎么去除按钮的样式属性. 也讲了事件委托,实现了可以删除新添加的元素的功能.

极简的js点击组图切换效果

程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含一个html文件,一个css文件,一个js文件,一个jquery.js文件,以及一张图片. index.html <html><head><title>js点击组图左右滑动</title><meta http-equiv="Content-Typ

1.横向滚动条,要设置两个div包裹. 2. 点击切换视频或者图片. overflow . overflow-x

1.横向滚动条. div.1 > div.2 > img img  img 第一: 设置 div.1 一个固定的宽度 和高度  . 例如宽度 700px;  高度是 120px; 设置 overflow-x 第二; 每个图片的 宽度是 150px, 高度 100px( 比 div.1 小, 要可以显示横向滚动条 第三: 重点 . 设置 div.2 的宽度 .  如果有 10个图片, 每个图片margin-right 为 10px,   那么 div.2 的宽度就是  (150+10)*10 这

css实现的轮播和点击切换(无js版)

.slide{ position: relative; margin:auto; width: 600px; height: 200px; text-align: center; font-family: Arial; color: #FFF; overflow: hidden; } .slide ul{ margin:10px 0; padding:0; width: 9999px; transition:all 0.5s; } /*//自动播放*/ .slide .slide-auto{ a

html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码

一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的div,代码实现思路如下: <a class="banner" href="/schoolFair/registration#nav"> <a href="#abc">点击跳转</a>    <div id=&

【技术】点击切换&amp;自动切换选项卡

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>点击切换和自动切换选项卡</title> <style type="text/css"> *{list-style:none;margin:0;padding:0;overflo

用html+css+js实现选项卡切换效果

文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房 家居: 40平出租屋大改造 美少女的混搭小窝 经典清新简欧爱家 90平老房焕发新生 新中式的酷色温情 66平撞色活泼家居

js实现图片切换效果

用js实现点击按钮,图片切换的效果: 1 <div class="box" id="box"> 2 <div class="img_box" id="img_box"> 3 <img src="../raw/b1.jpg" class="image" > 4 <img src="../raw/b2.jpg" class=&qu

Javascript:实操---类似京东图片点击切换

CSS部分 <style>*{ margin:0; padding:0;}#div1{ width:670px; height:150px; margin:20px auto; position:relative; overflow:hidden;}.out{ width:5000px; height:150px; overflow:hidden; position:absolute;}.out ul{ height:150px; list-style:none; position:absol