jsp简洁左侧面板

基于ajax做前端左侧面板

         在没有使用前端框架的时候，你获得只是UI的静态页面，需要展示成一个简洁复用的动态页面，例如一个简单的左侧菜单。

效果图如下。点击换色

我要达到点击变色并且获得左侧页面的动态效果，前端静态代码

      step1

由于我的左侧菜单不是数据动态数据所以完全不用担心，直接套用

不同的是我没把事件绑定到a标签上面，因为我之前传递的是一个this进去现在需要一个id值得引入，为什么呢？

如果这里没有数据当点击创建文档时要跳转到创建档案栏去的，所以我需要一个值得引入。是为了做一个定位。看下面的ajax代码。

首先我要调用后台的action去跳转不是在前端直接跳转页面，通过传入的URL直接获取成一个html的代码片段，第二部解析左侧菜单删除正在选中的项颜色，class值是一个on

obj就是传入的id值，之前是传入的一个this也就是当前点击的li，这样我其它的地方如果没有li就没法复用。所以改成id传入。

其余调用也就一样了

调用方式还是一样

对于修改静态的页面最容易出现的错误，入前文的分页。静态设置为动态并且绑定事件。特别是提炼公共部分成为模板时。容易出现情况。第一大部分UI是通过class属性选择器，多个会产生冲突。所以建议引入唯一属性的id或者是不重名的name作为选择器。第二若预加载已生成，在此点击生成覆盖。之前绑定的事件会累积。例如通过bind或者bindEvent绑定事件。不设置事件先清空（及$().off('click')在生成，没重新生成一次，事件累积+1；第三怎么样应对样式冲突？很多时候样式的冲突不过是因为，class样式重名且相同属性或者是全局或者是浮动影响。解决办法有两种第一步设置最后一个引入css 重名样式属性为 !important;提高渲染级别强制覆盖。或者就是修改重名的css。