纯js实现标题中样式的切换，同时附带jq实现类似的方法

最新推荐文章于 2022-05-14 18:18:54 发布

weixin_30753873

最新推荐文章于 2022-05-14 18:18:54 发布

阅读量108

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/smallswallows/p/6975236.html

本文介绍了一个使用JavaScript和JQuery实现的图片轮播案例，详细展示了如何通过DOM操作来切换不同图片对应的表格内容，实现了简洁的轮播效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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].onclick=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].onclick=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实现节省了大量代码

})
$('.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>

转载于:https://www.cnblogs.com/smallswallows/p/6975236.html