Q&A
まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
html,css,Javascript,jQueryの勉強中です。
クリックされたボタンの見た目が変わるようjQueryで設定したいのですが、ネットなどで調べて出てくるコードなど、全て実装できませんでした。
三つのボタンを、クリックで色が変わる、別ボタンクリックでそちらだけが変わる、というような処理をしたいです
htmlコード↓
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>クリックイベントと切り替え</title> <link rel="stylesheet" type="text/css" href="base.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(function(){ // ここにjQuery処理を記載})
})
</script>
CSSコード↓
@charset "UTF-8";
/* reset */
body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd, img, form, table, tr, th, td {
margin: 0;
padding: 0;
border: none;
font-style: normal;
font-weight: normal;
font-size: 100%;
text-align: left;
list-style-type: none;
border-collapse: collapse;
}
textarea { font-size: 100%; vertical-align:middle;}
img { border-style: none; display: block; }
hr { display: none; }
em{font-style: normal}
input{line-height:auto;vertical-align:middle;}
strong.more{color:#c30}
a{text-decoration: none;}
html {
}
body {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
- {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/* 上の部分は気にせずここから書く */
#wrapper {
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
}
.button {
margin: 0 20px;
width: 320px;
height: 180px;
background-color: #fdd;
cursor: pointer;
}
.button p {
line-height: 180px;
font-size: 30px;
text-align: center;
}
.active{
background-color: red
color: blue
}
回答1件
0
ベストアンサー
何を試したのかわからなかったため、コードを見た推測でご回答を致します。
クリックした時にclass="active"を追加して見た目を変えることをjQueryで実装したいと仮定した場合、
.activeのcssにセミコロンが抜けているため、cssが適応されず見た目が変わってないことが考えられます。
css
1.active{ 2background-color: red // ;(セミコロン)抜け 3color: blue // ;(セミコロン)抜け 4} 5
セミコロンを記載してもう一度試していただくと良いと思います。
投稿2021/02/06 09:18
総合スコア34
あなたの回答
tips
プレビュー
