无法获取a标签，大家帮忙看看啊
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src='js/test.js'></script>
<style>
* {
margin: 0;
padding: 0;
}
body>div {
border: 1px solid #05f;
width: 560px;
overflow: hidden;
}
body>div>div {
position: relative;
}
div>h2 {
border: 1px solid #05f;
line-height: 50px;
text-align: left;
text-indent: 10px;
background: -webkit-linear-gradient(top,#fff 50%,#00f 100%);
}
div>ul {
position: absolute;
top: 20px;
left: 120px;
}
div>ul>li {
list-style-type: none;
display: inline-block;
text-align: center;
width: 80px;
line-height: 30px;
border: 1px solid #11f;
}
.title {
display: inline-block;
}
.title img {
width: 140px;
height: 140px;
padding: 20px;
background: #fff;
}
.con {
display: inline-block;
position: absolute;
width: 100000px;
top: 20px;
left: 182px;
z-index: -999;
}
.con img {
width: 120px;
height: 120px;
margin: 0 3px;
}
.button {
position: absolute;
top: 150px;
left: 280px;
}
.button a {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #00f;
text-align: center;
cursor: pointer;
border-radius: 2px;
margin: 0 10px;
}
.button a:first-of-type {
float: left;
}
.button a:nth-of-type(2) {
float: right;
}
.button span {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #3a3a3a;
background: #aaa;
margin: 0 4px;
}
</style>
</head>
<body>
<div>
<h2>数码</h2>
<ul>
<li>新品</li>
<li>极客</li>
</ul>
<div>
<div id="title">
<img src="" alt="">
</div>
<div id="con">
</div>
<div id="button">
</div>
</div>
</div>
<script>
window.onload = function(){
load(num);
}
var oBtn = document.getElementById('button'),
aBtn = document.getElementsByTagName('a'),
aSpan = oBtn.getElementsByTagName('span'),
oTil = document.getElementById('title'),
oCon = document.getElementById('con'),
aLi = document.getElementsByTagName('li'),
str1 = '',
str2 = '',
spanstr1 = '<a><</a><a>></a>',
spanstr2 = '<a><</a><a>></a>',
num = 0,
snum = 0,
aImg1 = ["images/淘宝商品广告效果/10.jpg","images/淘宝商品广告效果/11.jpg","images/淘宝商品广告效果/12.jpg","images/淘宝商品广告效果/10.jpg"],
aImg2 = ["images/淘宝商品广告效果/2.jpg","images/淘宝商品广告效果/3.jpg","images/淘宝商品广告效果/4.jpg",
"images/淘宝商品广告效果/5.jpg","images/淘宝商品广告效果/6.jpg","images/淘宝商品广告效果/7.jpg",
"images/淘宝商品广告效果/8.jpg","images/淘宝商品广告效果/9.jpg","images/淘宝商品广告效果/10.jpg"];
for(var i=0;i<aImg1.length;i++){
str1 += "<img src='"+aImg1[i]+"'/>";
}
for(var i=0;i<aImg2.length;i++){
str2 += "<img src='"+aImg2[i]+"'/>";
}
for(var i=0;i<Math.ceil(parseFloat(aImg1.length/3));i++){
spanstr1 += '<span></span>';
}
for(var i=0;i<Math.ceil(parseFloat(aImg2.length/3));i++){
spanstr2 += '<span></span>';
}
function load(num){
aLi[num].style.background = '#00f';
aLi[num].style.color = '#fff';
oCon.style.left = '182px';
if(num === 0){
oCon.innerHTML = str1;
oTil.innerHTML = "<img src='"+aImg1[0]+"'/>";
oBtn.innerHTML = spanstr1;
spancur(0);
}
if(num === 1){
oCon.innerHTML = str2;
oTil.innerHTML = "<img src='"+aImg2[0]+"'/>";
oBtn.innerHTML = spanstr2;
spancur(0);
}
}
function spancur(num){
aSpan[num].style.background = "#fff";
aSpan[num].style.borderColor = "#00f";
}
for(var i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].onmouseover = function(){
for(var i=0;i<aLi.length;i++){
aLi[num].style.background = 'transparent';
aLi[num].style.color = '#000';
}
num = this.index;
load(num);
}
}
aBtn[0].onmousedown = function(){
doMove(oCon,'left',20,-200);
};
</script>
</body>
</html>
无法获取a标签，大家帮忙看看啊
铃铛33回答
-
stone310
看了下你的代码，你这里<a>是动态加载，是在load函数内加载：将<a>的mousedown事件用函数包裹起来，不让他加载js的时候执行，然后放到load()后面去，因为load创建了a标签aLi[num].style.background = 'transparent'; aLi[num].style.color = '#000'; } num = this.index; load(num); move(); //放这里就是load的执行完，相当于a标签加载完毕，再去执行move() } } function move(){ aBtn[0].onmousedown = function(){ doMove(oCon,'left',20,-200); }; } </script> </body> -
小财大不同
噢很厉害 -
慕田峪3555374
事件写的有问题，刚开始页面中都没有a标签你当然获取不到，要理清逻辑，先生成a标签然后才能获取
随时随地看视频慕课网APP
Html/CSS
JavaScript