<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>tab切換jQuery</title>
<script?type="text/javascript"?src="jquery-3.1.0.js"></script>
<style>
*{padding:?0px;margin:?0px;}
li{list-style:?none;}
a{text-decoration:?none;color:?#565656;}
.wraper{margin:?100px?auto;border:?1px?solid?#000;height:?500px;width:?500px;padding:?100px;}
.tab_nav{height:?35px;padding-left:1px;}
.tab_nav?li{width:?60px;?line-height:?35px;float:?left;text-align:?center;margin-left:?-1px}
.tab_nav?li?a{display:?block;border:?1px?solid?#38c1ff;}
.tab_cont{margin-top:?1px;}
.cont{width:?300px;height:150px;border:?1px?solid?#38c1ff;text-align:?center;line-height:?150px;?display:?none;?}
.tab_nav?li?a.slc{border-bottom:?1px?solid?#fff;}
.blk{display:?block;}
.hid{display:?none;}
</style>
</head>
<body>
<div>
<div>
<ul>
<li><a?href="javascript:void">標題1</a></li>
<li><a?href="javascript:void">標題2</a></li>
<li><a?href="javascript:void">標題3</a></li>
<li><a?href="javascript:void">標題4</a></li>
</ul>
</div>
<div>
<div?class="cont?blk">內(nèi)容1</div>
<div>內(nèi)容2</div>
<div>內(nèi)容3</div>
<div>內(nèi)容4</div>
</div>
</div>
<script?type="text/javascript">
$(document).ready(function(){
$('.tab_nav?ul?li').click(function(){
var?ind=$(this).index();
$(this).children('a').addClass('slc');
$(this).siblings().children('a').removeClass('slc');
$('.tab_cont?.cont').eq(ind).addClass('blk');
$('.tab_cont?.cont').eq(ind).siblings().removeClass('blk');
});
});
</script>
</body>
</html>這是錯誤提示
jquery實現(xiàn)的tab切換為什么ie8不兼容
Hall0W0rld
2017-09-01 19:02:35
