                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /信息排列效果

求解啊实现不了啊

为什么我代码一模一样，却切换不了呢？就是一闪一闪的？

Bee_Genius

2016-08-09

源自：信息排列效果 4-1

关注问题我要回答

1380

操作

收起

4 回答

慕移动9181930
2022-03-25

试着手动在配置文件里加上这句话，然后把MySQL重新启动一下自己给自己顶上一个吧。

0 回复有任何疑惑可以回复我~

收起回答

暮女神
2017-07-08

这两句把href的值改成#或javascript:;用来阻止a的默认行为

1 回复有任何疑惑可以回复我~

收起回答

Bee_Genius 提问者
2016-08-09

这不对么

0 回复有任何疑惑可以回复我~

收起回答

Bee_Genius 提问者
2016-08-09

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>人人信息卡片模式布局</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
body{
font-size: 14px;
}
a{
text-decoration: none;
}
#box{
width: 550px;
margin: 0 auto;
border: 1px solid #aaa;
overflow: hidden;
}
.top{
height: 40px;
}
#box .top a{
width: 16px;
height: 16px;
display: block;
float: right;
margin: 5px;
}
.btn-list-off{
background: url("images/btns.jpg") no-repeat -38px 0;
}
.btn-card-on{
background: url("images/btns.jpg") no-repeat -20px -33px;
}
.btn-list-on{
background: url("images/btns.jpg") no-repeat -21px 0px;
}
.btn-card-off{
background: url("images/btns.jpg") no-repeat -37px -32px;
}
#box li{
width: 164px;
border: 1px solid #aaa;
float: left;
margin:10px 7px;
}
#box .info p a,p span{
display: block;
line-height: 23px;
margin-left: 10px;
}
#box .bottom{
height: 40px;
line-height: 40px;
text-align: center;
background: #ccc;
}
.a-img{
width: 164px;
height: 164px;
overflow: hidden;
display: block;
}
.small{
height: 50px;
width: 50px;
margin: 5px;
float: left;
}
</style>
<script type="text/javascript">
window.onload = function (){
var listBtn=document.getElementById('btn1');
var cardBtn=document.getElementById('btn2');
var imgs=document.getElementsByTagName("img");

listBtn.onclick=function (){
/*改变按钮的class值*/
listBtn.className="btn-list-on";
cardBtn.className="btn-card-off";
/*改变每个图片的路径以及它对应的父节点的className*/
for(var i=0;i<imgs.length;i++){
imgs[i].src='./images/small.jpg';
imgs[i].parentNode.className="a-img small";
}
}

cardBtn.onclick=function (){
/*改变按钮的class值*/
listBtn.className="btn-list-off";
cardBtn.className="btn-card-on";
/*改变每个图片的路径以及它对应的父节点的className*/
for(var i=0;i<imgs.length;i++){
imgs[i].src='./images/big.jpg';
imgs[i].parentNode.className="a-img";
}
}
}
</script>
</head>
<body>
<div id="box">
<div class="top">
<a href="" title="列表模式" id="btn1" class="btn-list-off"></a>
<a href="" title="卡片模式" id="btn2" class="btn-card-on"></a>
</div>
<ul>
<li>
<div class="info">
<a href="" class="a-img"><img src="images/big.jpg" alt=""></a>
<p>
<a href="">名字</a>
<span>地区</span>
<span>N个共同好友</span>
</p>
</div>
<div class="bottom">
<span>未分组的好友</span>
</div>
</li>
<li>
<div class="info">
<a href="" class="a-img"><img src="images/big.jpg" alt=""></a>
<p>
<a href="">名字</a>
<span>地区</span>
<span>N个共同好友</span>
</p>
</div>
<div class="bottom">
<span>未分组的好友</span>
</div>
</li>
<li>
<div class="info">
<a href="" class="a-img"><img src="images/big.jpg" alt=""></a>
<p>
<a href="">名字</a>
<span>地区</span>
<span>N个共同好友</span>
</p>
</div>
<div class="bottom">
<span>未分组的好友</span>
</div>
</li>
<li>
<div class="info">
<a href="" class="a-img"><img src="images/big.jpg" alt=""></a>
<p>
<a href="">名字</a>
<span>地区</span>
<span>N个共同好友</span>
</p>
</div>
<div class="bottom">
<span>未分组的好友</span>
</div>
</li>
<li>
<div class="info">
<a href="" class="a-img"><img src="images/big.jpg" alt=""></a>
<p>
<a href="">名字</a>
<span>地区</span>
<span>N个共同好友</span>
</p>
</div>
<div class="bottom">
<span>未分组的好友</span>
</div>
</li>
<li>
<div class="info">
<a href="" class="a-img"><img src="images/big.jpg" alt=""></a>
<p>
<a href="">名字</a>
<span>地区</span>
<span>N个共同好友</span>
</p>
</div>
<div class="bottom">
<span>未分组的好友</span>
</div>
</li>
</ul>
</div>
</body>
</html>