                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /信息排列效果

求解啊實現不了啊

為什么我代碼一模一樣，卻切換不了呢？就是一閃一閃的？

Bee_Genius

2016-08-09

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

關注問題我要回答

1422

操作

收起

4 回答

慕移動9181930
2022-03-25

試著手動在配置文件里加上這句話，然后把MySQL重新啟動一下自己給自己頂上一個吧。

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

收起回答

暮女神
2017-07-08

?<a href="" title="列表模式" id="btn1" class="btn-list-off"></a>
<a href="" title="卡片模式" id="btn2" class="btn-card-on"></a>

這兩句把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>