在网页制□□□□作中，页面有些□□□部分内容□□往往会有□□很多要展○示，而为了页▼面美观或□□□展示位置□□□□不够多，需要类似□□□选项卡切□□换效果来□□□展示更多□□的内容。
页面效果如图：

点击切换后效果如图：

html结构如图：

css如图：

js如图：

demo引入了jQuery插件，选项卡切□□换只写了□□□三个便于▲好理解，顶部的导□□□□航分类默□□□□认第一个◉选中效果（类名on），对应下面□□□□的内容块□□□第一个（类名on），点击导航□□□分类时，为当前点□□□□击的标签li添加默认□□□□的类名on（addClass），其余的同▽级标签li(siblings)删除类名on(removeClass)，在获取当□□□前点击的li标签的下□□□□标（$(this).index()）,通过下标□□□□值为三个□□□内容块中◈对应的内□□□容块添加★类名on（addClass），其余的(siblings)删除类名on(removeClass)。