我是Javascript的全新,所以有你的想法! 我有三張照片,下面有三個按鈕。一個大拇指,infosymbol和垃圾桶。當我點擊一個按鈕(我不希望它在哪個圖片下按鈕),我想圖片和按鈕在div消失,而不是出現在div大拇指(如果我點擊拇指上圖標)。 我到目前爲止,但只適用於圖片下的特定按鈕,我不能更改出現的圖標上的字體樣式。循環按鈕和改變樣式
var tumme = document.getElementsByClassName("btn-primary")[0];
var div = document.getElementsByClassName("col-md-4")[0];
tumme.addEventListener("click", function() {
div.outerHTML = '<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>';
div.style.backgroundColor = "red";
});
.col-md-4 img {
width: 100%;
height: auto;
}
@media (min-width: 768px) and (max-width: 992px) {
.col-center {
float: none;
margin: 0 auto;
}
}
.linje-botten {
border-bottom: 3px solid black;
}
li:hover {
background-color: #1a542b;
}
.navbar-nav {
margin: 0px;
font-size: 1.4em;
}
/* #1a542b #eb9822 */
.navbar-inverse .navbar-nav>li>a {
color: white;
}
.col-xs-6 {
margin-bottom: 5px;
}
img {
margin-bottom: 3px;
}
.navbar-inverse {
box-shadow: #515d63 4px 4px 4px;
}
body {
background-color: #eb9822;
}
<script src="https://use.fontawesome.com/ab9989071e.js"></script>
<div class="container">
<div class="row">
<header class="col-md-12 col-xs-12 text-center">
<h1 class="linje-botten">A&A-design</h1>
<!--fixa någon logga här-->
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="bakgrund"><a href="om.html">Om oss</a>
</li>
<li class="bakgrund"><a href="projekt.html">Tidigare projekt</a>
</li>
<li class="bakgrund"><a href="priser.html">Priser</a>
</li>
<li class="bakgrund"><a href="kontakt.html">Kontakt</a>
</li>
<li class="bakgrund"><a href="hitta.html">Hitta hit</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="col-md-4 col-xs-6">
<img src="../f%C3%B6retag/bilder/data1.jpg" alt="">
<button class="btn btn-block btn-primary" type="button"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>Gilla</button>
<button class="btn btn-block btn-info" type="button"><i class="fa fa-info" aria-hidden="true"></i>Info</button>
<button class="btn btn-block btn-danger" type="button"><i class="fa fa-trash" aria-hidden="true"></i>Skicka till papperskorgen</button>
</div>
<div class="col-md-4 col-xs-6" id="butt">
<img src="../f%C3%B6retag/bilder/data2.jpg" alt="">
<button id="button" class="btn btn-block btn-primary" type="button"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>Gilla</button>
<button class="btn btn-block btn-info" type="button"><i class="fa fa-info" aria-hidden="true"></i>Info</button>
<button class="btn btn-block btn-danger" type="button"><i class="fa fa-trash" aria-hidden="true"></i>Skicka till papperskorgen</button>
</div>
<div class="col-md-4 col-xs-6 col-center">
<img src="../f%C3%B6retag/bilder/data3.jpg" alt="">
<button class="btn btn-block btn-primary" type="button"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>Gilla</button>
<button class="btn btn-block btn-info" type="button"><i class="fa fa-info" aria-hidden="true"></i>Info</button>
<button class="btn btn-block btn-danger" type="button"><i class="fa fa-trash" aria-hidden="true"></i>Skicka till papperskorgen</button>
</div>
</main>
</div>
</div>
非常感謝您的幫助!我還有兩個問題。任何想法如何讓div站在同一個地方(不要去最後一個位置),我怎麼能做出一種開關,所以我可以返回到第一個樣式,當我點擊大拇指:) – Adam
Np 。 :)第一個問題 - 不同的CSS設置。第二 - 不要覆蓋HTML,在這種情況下 - 而是隱藏父元素(style.display ='none')...將嘗試一些東西.... – sinisake
你是什麼意思與不同的CSS設置? :) – Adam