开发工具与关键技术：Visual Studio 2015 作者：杨镇虹 撰写时间：2019.05.28
一、html布局 获取到三个input标签的设置为单选框type="radio"的id，分别是这三个id: id=“dx”、id=“dx1”、id="dx2"分别点击这三个单选框radio让下面的内容来回切换，这是点击到的三个input标签 html布局如：图1 图1 城市内容html布局 同样是获取到这三个盒子的id里面的内容，点击到上面的三个input标签来回切换这三个id里面的内容，这三个id分别是：id=“xz”、id=“xz1”、id=“xz2” html布局如：图2 图2 三个所有内容布局 点击单程-显示隐藏选择城市全部内容 html布局代码
内容 点击来回程-显示隐藏选择城市全部内容 内容 点击多程-显示隐藏选择城市全部内容 内容 二、js实现效果window.onload = function () { var获取到id，后面是获取到的布局的id前面的是获取到的布局id等于的变量,下面全部获取id的都是一样 /上面的布局input标签获取到单程的id/ var dx = document.getElementById(“dx”);/单程id/ /上面布局input标签获取到来回程id/ var dx1 = document.getElementById(“dx1”); /上面布局input标签获取到多程id/ var dx2 = document.getElementById(“dx2”); 获取到的三个城市内容的id var xz = document.getElementById(“xz”);/单程显示隐藏选择城市内容的id/ var xz1 = document.getElementById(“xz1”);/来回程显示隐藏选择城市内容id/ var xz2 = document.getElementById(“xz2”);/多程显示隐藏选择城市内容id/ 获取到的三个所有内容的id var dx3 = document.getElementById(“dx3”);/单程显示隐藏单程全部内容id/ var dx4 = document.getElementById(“dx4”);/来回程显示隐藏来回程全部内容id/ var dx5 = document.getElementById(“dx5”);/来回程显示隐藏多程全部内容id/ //点击单程input标签的时候， 给单程城市设置block显示内容，给来回程城市设置none隐藏内容，给多程城市设置none隐藏内容，给单程全部内容设置block显示内容，给来回程全部内容设置none隐藏内容，给多程全部内容也设置none隐藏内容 就可以显示隐藏切换内容 dx.onclick = function () { xz.style.display = (“block”);单程城市id xz1.style.display = (“none”);来回程城市id xz2.style.display = (“none”);多程城市id dx3.style.display = (“block”);单程全部内容id dx4.style.display = (“none”);来回程全部内容id dx5.style.display = (“none”);多程全部内容id } //点击来回程input标签的时候，同样也是给来回程城市设置block显示内容，给单程城市设置none隐藏内容，给多程城市设置none隐藏内容，给单程全部内容设置none隐藏内容，给来回程全部内容设置block显示内容，给多程全部内容设置none隐藏内容，把需要显示的内容设置block，把不需要的内容设置none隐藏 dx1.onclick = function () { xz1.style.display = (“block”);来回程城市id xz.style.display = (“none”);单程城市id xz2.style.display = (“none”);多程城市id dx3.style.display = (“none”);单程全部内容id dx4.style.display = (“block”);来回程全部内容id dx5.style.display = (“none”);多程全部内容id } 点击多程也是一样把需要的多程内容设置style.display=(“block”);显示内容，把不需要的内容设置none把内容隐藏 dx2.onclick = function () { xz2.style.display = (“block”);多程城市id xz.style.display = (“none”);单程城市id xz1.style.display = (“none”);来回程城市id dx3.style.display = (“none”);单程全部内容id dx4.style.display = (“none”);来回程全部内容id dx5.style.display = (“block”);多程全部内容id } }
