Ⅰ版本一、html强大的“点击左侧栏目，右侧对应的内容显示的模板思路”一套一个准。

首先我们看看需求，贴上截图，更加的清晰明了。

需求就是点击左侧栏目哪一个，就显示右边具体哪一个。

那么我们做这个布局的时候，都是这么一个思路，左边有多少个，右边就有多少个，但是右边第一个是默认显示的，然后后面三个的display设置为none，等后面触发点击事件的时候，我们再操作他的block，附上代码模板思路：

定义了最外层的一个box大盒子，然后有left左边的盒子，right右边的盒子。left里面有四个小div，右边也有四个小div，只不过第一个是默认显示，所以display默认就是block的，其他的三个必须设置为display为none不显示。

接下来我给大家讲一下思路：

首先我们拿到这个需求的时候，看到需求：点击左侧哪一个就让右边哪一个显示，欸，这不简单，不就是给左边的四个小div都添加点击事件，然后我点击哪一个，就让右边哪一个显示，然后就咔咔一顿造，写下如下的代码：

然后最终显示的结果就是，我点击左侧哪一个，确确实实右边对应的哪一个就会显示，但是TM，一直追加。所以我们得稍微想一下，就是在点击事件之前，我用不用先判断是否已经有显示过的，如果有的话，我们拿到那个已经显示的index，然后先让这个已经显示的index隐藏掉，然后你当前点击的index才显示出来。那我们到底如何拿到已经显示的index呢？我们可以这样想，当右边一个div显示的时候，我们就将该div的index赋值给一个变量，假如叫做show_tag，那么下一次点击之前我们去判断的时候，就可以拿到这个变量show_tag，那么可能同学们就会想，你这个变量默认值应该是多少呢？回到刚刚，我们定义这个变量的意义是什么?这个变量代表什么？不就是标志哪一已经显示的吗？那一开始默认显示的是谁？不就是首页的内容吗？那不就是right里面的第一个p标签吗?所以看场景需求，这里show_tag的默认值就是0。到这里之后呢同学们可以根据我提供的这个思路，先去自己写一下。然后自己最终再整理一下思路。下面我附上我的代码思路。

我用的是jquery写的。如果你们用jquery写的，记得导入jquery.js

总结：

以后遇到这种需求，我们首先就是先布局，布局模板思路也是一样，左边有几个，右边就有几个，然后让第一个默认display是block，其他几个都先display为none。然后就写js/jquery事件。

先定义一个变量show_tag代表已经显示的，然后给左边每一个document写点击事件，在点击事件里面，就先判断shw_tag是否等于当前$(this).index()，如果不相等，直接让已经显示的show_tag对应的right隐藏，当前自己$(this).index()对应的right显示。如果相等，看场景需求，如果点击相同没啥需求，我们就不用加else。

note：这里其实还可以添加一小需求，就是当我点击左边哪一个栏目，哪一个栏目的背景颜色就字体加粗，同学们可以在这个代码的基础上做添加。我也附上代码，还是同样的思路，我会写在注释里面。

最后：如果大家觉得博主写的不错的话，可以给个免费的赞赞。谢谢。