<div class="center">

<div style="border-bottom: 1px solid red;margin-top: 10px;width: 1100px;">

<ol class="clear_fl title_ol">

<li class=" "></li>

<li class="ol_li1"></li>

<li class="ol_li1"></li>

<li class="ol_li1"></li>

<li ></li>

<li ></li>

<li ></li>

<li ></li>

</ol>

</div>

<div style="border-bottom: 1px solid red;margin-top: 10px;width: 1100px;">

<ul class="clear_fl title">

<li class="li li1 active">标致</li>

<li class="li li1">雪铁龙</li>

<li class="li li1">雷诺</li>

</ul>

</div>

<table cellspacing="0" style="margin-top: 5px;" class="table table1">

</table>

<table cellspacing="0" style="margin-top: 5px;" class="table table1 none">

</table>

<table cellspacing="0" style="margin-top: 5px;" class="table table1 none">

</table>

</div>

</body>

<script type="text/javascript">

var title_ol = document.getElementsByClassName('title_ol');

// console.log(title_ol.length);

var lis,ol_lis,tables;

for(var k=1;k<=title_ol.length;k++){

var li = 'li'+k;

var ol_li = 'ol_li'+k;

var table = 'table'+k;

console.log(li)

lis = document.getElementsByClassName(li);

ol_lis = document.getElementsByClassName(ol_li);

tables = document.getElementsByClassName(table);

// console.log(lis)

xunhuan(li,ol_li,table,lis,ol_lis,tables);

}

//自己封装方法，在本实例中 title_ol中存放的是图片，跟title中的li依次对应相应的table表

//效果展示https://sale.jd.com/act/uTvQ4UIith0R.html

function xunhuan(li,ol_li,table,lis,ol_lis,tables){

var a ='li'+' '+li;

var b ='li active'+' '+li;

var c ='table none'+' '+table;

var d ='table'+' '+table;

for(var i=0;i<lis.length;i++){

lis[i].index = i;

lis[i].οnclick=function(e){

for(var j=0;j<lis.length;j++){

lis[j].className=a;   //类似jq方法中移除兄弟元素中的类

tables[j].className=c;

}

// console.log(d)

this.className=b;  //类似jq方法中所点击元素添加类

tables[this.index].className=d;

// console.log(this.index);

}

}

for(var i=0;i<ol_lis.length;i++){

ol_lis[i].index = i;

ol_lis[i].οnclick=function(e){

for(var j=0;j<ol_lis.length;j++){

lis[j].className=a;

tables[j].className=c;

}

// console.log('li')

lis[this.index].className=b;

tables[this.index].className=d;

// console.log(this.index);

}

}

}

</script>

 

//用jq实现方法 比js实现节省了大量代码

<script type="text/javascript">

var li = document.getElementsByClassName('li')

$('ul.title li').click(function(){

var title_id = $(this).parent();

// console.log('title_id');

var index = $(this).index();

$(this).siblings().removeClass('active');

$(this).addClass('active');

// $(this).addClass('active').siblings().removeClass('active');

$('.table').css('display','none');

$('.table').eq(index).css('display','block');

// $('.table').css('display','none').eq(index).css('display','block');

})

$('.title_ol li').click(function(){

var index = $(this).index();

// console.log(index);

$('ul.title li').eq(index).addClass('active').siblings().removeClass('active');

$('.table').css('display','none');

$('.table').eq(index).css('display','block');

})

</script>