运用隐藏和显示选项卡

 运用隐藏和显示选项卡

这里给大家带来一个小技巧，如何用消失和隐藏快速的做个选择切换样式；

首先我们先来看下样式；如下；

这里的选择有4个，我们点击其他单选框的时候，就会让页面切换；

这里可以看出来；我们单选框选择切换到的时候，下面和右边的一个区域也有切换；

先来讲下原理：我们这里4个单选框是固定的，然后下面和右边的页面分别都有4个，和4个单选框对应；然后全部我们给4个单选框一个点击事件；当点击第一个的时候，显示和第一个单选框对应的下面和右边的页面。其他的全部隐藏掉；同理，选择到第二个选项的时候，显示和第二个对应的，隐藏其他的；

来看下代码；

这里的HTML样式。也就是单选框；我们给了4个点击事件；

这里的话也是对应切换的页面；每个div都有一个id；方便我们获取到；

然后就是点击事件，选择显示和隐藏的，我们开始的时候就要有一个显示，所以第一个放在加载事件里面。

想切换的时候，点击另一个，切换显示和隐藏就好了；