最近做项目里面写的js代码实现效果

开发工具与关键技术：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
}
}