
图中,左侧和右侧都需要添加不同的class类样式
结构:
<div class="left"><div class="img_bg leftOne" @click="clickLeft('企业文化')">企业文化</div><div class="img_bg leftTwo" @click="clickLeft('公司目标')">公司目标</div><div class="img_bg leftThree" @click="clickLeft('公司战略')">公司战略</div><div class="img_bg leftFour" @click="clickLeft('公司宗旨')">公司宗旨</div></div><div class="right"><div class="img_bg rightOne" @click="clickLeft('公司使命')">公司使命</div><div class="img_bg rightTwo" @click="clickLeft('核心价值观')">核心价值观</div><div class="img_bg rightThree" @click="clickLeft('企业精神')">企业精神</div><div class="img_bg rightFour" @click="clickLeft('品牌口号')">品牌口号</div></div>
js:
clickLeft(val){//动态添加样式//添加左侧激活的样式 $('.left div').click(function(){$(this).addClass('is_active_left').siblings().removeClass('is_active_left');//删除右侧列表激活的样式$('.right div').each(function(index,item){var $this = $(item);$this.removeClass('is_active_right');})})$('.right div').click(function(){$(this).addClass('is_active_right').siblings().removeClass('is_active_right');$('.left div').each(function(index,item){var $this = $(item);$this.removeClass('is_active_left');})})}
















