选项卡

开发工具与关键技术：VS+MVC
作者：茅凯翔
撰写时间：2019年5月25日

我记得我之前也写过选项卡，但是跟这个不一样，那个我是用DW写的，这次我用MVC写，里面的内容也差不多，之前的是四个可以切换，这次就两个而已。样式都差不多，已改少一点。这个是它的标题的源代码与css样式，多个以上就用ul段落标签包裹着li标签，是不是看着很多？因为我的css样式也在里面，所以你看起来很多，style后面的都是css样式。给它们id和div，id用于后面js获取。里面的内容用span行内标签包着。

这个是它的内容的源代码与css样式。这也就是第一个内容区，我这里有三种内容，所以还是用ul段落标签包裹其他的标签，ul段落标签是与li标签一起的，有ul段落标签都会有li标签的。因为它们都是放在ul段落标签里面的，所以id给ul段落标签就好了。我这个是第一个内容，所以要给display：block；这个是显示的意思，然后其它的内容就给display：none隐藏就好了。等到你的js执行的时候，你点击哪个内容区，哪个内容区的display就会跳成block。下面的初始地的input标签就是文本框，到达地的input标签也是文本框，placeholder里面的内容是显示在页面上的文字。会员类型的select是下拉框，包裹着option是定义选项组。

最后来写js方面。var声明变量，（Tmmz）是第一个标题的id，（Tmmx）是第二个标题的id，（zxnr）是第一个内容的id，（rnxz）是第二个内容的id。通过上面获取的id的内容传到自定义一个名称里去，把这四个id都获取了。获取第二个id来实现点击事件，点击第二个id，第二个内容就为block状态，第一个内容就为none状态。block状态下的背景颜色为fff，字体颜色为185d8c。none状态下的背景颜色为cadae7，字体颜色为000。所以点击第二个标题，内容就会从第一个内容切换成第二个内容，背景颜色与字体颜色都会切换成block状态的颜色。然后另一个页面就是相反的，获取到第一个标题的id，把它们的状态的代码与切换后的背景颜色和字体颜色调一下，然后去页面执行一下，记住block是显示状态，none是隐藏状态。

源代码、css样式、js样式都弄好了，再来看看效果图，第一张图为第一个标题与内容，第二张图为第二个标题与内容：