5行目をクリックすると個々のdivの背景色を変更し、別のものがクリックされたときにリセットしますか？

私はこのウェブサイトで有用な答えがたくさん見つかっています。私が立ち往生して今私は自分自身を失ってしまいました。これはかなり新しいので、JavaScriptを知らないからです。5行目をクリックすると個々のdivの背景色を変更し、別のものがクリックされたときにリセットしますか？

私は各ボタンの下にdiv要素を明らかに5つのボタンが含まれますその私のウェブサイトに機能を追加しようとしています（私は大丈夫です。このトグルのためのコードを持っているが!!

これがために起こっていますおそらく皆さんにとても簡単に聞こえるが、どのように私は、彼らが他のdivのいずれかをクリックし、これは5

<style type="text/css"> 
 
.btnmtb{ 
 
margin-right: 5px; 
 
touch-action: manipulation; 
 
cursor: pointer; 
 
background-color: #1E2327; 
 
padding: 20px 0px; 
 
text-align: center; 
 
} 
 

 

 
.btnmtb h1 { 
 
color: #fff; 
 

 
} 
 

 
.btnmtb h4 { 
 
color: #fff; 
 

 
} 
 

 
.btnmtb p { 
 
color: #fff; 
 
font-family: 'Ubuntu', sans-serif; 
 
font-size: 14px; 
 
padding: 0px 20px 0px 20px; 
 

 
} 
 

 
</style> 
 

 
<div class="disciplines"> 
 
<div class="row"> 
 
<div class="btnmtb col-md-2 col-md-offset-1 box1"> 
 
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p> 
 
<h1>Cross Country</h1> 
 
<h4>Hardtail - 100/120mm</h4> 
 
<p>eMountain Bikes designed for light offroad trails</p> 
 
<i class="fa fa-chevron-down"></i> 
 
</div> 
 
<div class="btnmtb col-md-2 box2"> 
 
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p> 
 
<h1>Cross Country</h1> 
 
<h4>FullSus - 100/120mm</h4> 
 
<p>Fast paced eMTB's designed for light trail with rear suspension</p> 
 
<i class="fa fa-chevron-down"></i> 
 
</div> 
 
<div class="btnmtb col-md-2 box3"> 
 
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p> 
 
<h1>Trail</h1> 
 
<h4>FullSus - 140/150mm</h4> 
 
<p>Mid Travel - perfect weapons for the more ambitious eMTB rider</p> 
 
<i class="fa fa-chevron-down"></i> 
 
</div> 
 
<div class="btnmtb col-md-2 box4"> 
 
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p> 
 
<h1>Enduro</h1> 
 
<h4>FullSus - 160/170mm</h4> 
 
<p>eMountain bikes with long travel designed for the toughest terrain</p> 
 
<i class="fa fa-chevron-down"></i> 
 
</div> 
 
<div class="btnmtb col-md-2 box5"> 
 
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p> 
 
<h1>Fatbike</h1> 
 
<h4>Large Tyres - 100/120mm</h4> 
 
<p>The eMountain bikes that look like they have dropped out of a comic book</p> 
 
<i class="fa fa-chevron-down"></i> 
 
</div> 
 
</div>

のそれぞれに取り組む必要がある場合は、それをリセットし、その後のdiv要素がクリックされたときに背景色を変更することができ

出典

2017-03-20 Adam Wolfe

はこのJavaScriptコード（更新）

を使用してください

出典

2017-03-20 07:09:35

まさに私が何をしたのか。素晴らしい。どうもありがとうございます。 –

こんにちはSunil、iveは、サファリなどのモバイルプラットフォームで背景色が選択解除されないことに気付きました。なぜこれがどんなアイデアですか？ –

はこちらからご覧いただけます - > https://charged.bike/ebike-buyers-guides/electric-mountain-bikes –

HTML

<body> 
    <div class="container"> 
    <div style="background-color:red;width:50%" class="element active"> 
     Red 
    </div> 
    <div style="background-color:yellow;width:50%" class="element"> 
     Yellow 
    </div> 
    <div style="background-color:blue;width:50%" class="element"> 
     Yellow 
    </div> 
    <div style="background-color:black;width:50%" class="element"> 
     Yellow 
    </div> 
    <div style="background-color:white;width:50%" class="element"> 
     Yellow 
    </div> 
    </div> 
</body>

のJavaScript + jQueryの

$(".element").on("click",function() 
{ 
    $(".element").removeClass("active"); 

    $(this).addClass("active"); 
});

CSS

.active{ 
    background-color:green !important; 
}

JSFiddle

出典

2017-03-20 06:52:55 maximelian1986

5行目をクリックすると個々のdivの背景色を変更し、別のものがクリックされたときにリセットしますか？

答えて

関連する問題