前提・実現したいこと
BootstrapのCarouselの<li>にあるclass='active'が変更する毎にh1タグのclassも同時に変更したい。
HTMLの<h1>内の文字の色をcarouselのページが切り替わる毎に、そのページに対応した色を指定したclassを追加して変えたいのですが、やり方がわからないため、教えてもらいたいです。
例えば、、、
slide1がactiveの時、h1にの文字の色をred
slide3がactiveの時、h1の文字の色をgreen
みたいな感じです。
↓↓サンプルコード貼っておきます。
https://generse919.github.io/sample/
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>sample</title> 7 <link rel="stylesheet" href="sample.css"> 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 9</head> 10 11<body> 12 <div id="carouselIndicator" class="carousel carousel-fade slide text-center" data-ride="carousel"> 13 <h1>Hello,World.</h1> 14 <ul class="carousel-indicators"> 15 <li data-target="#carouselIndicator" value="0" data-slide-to="0" class="cal1 active"></li> 16 <li data-target="#carouselIndicator" value="1" data-slide-to="1" class="cal2"></li> 17 <li data-target="#carouselIndicator" value="2" data-slide-to="2" class="cal3"></li> 18 <li data-target="#carouselIndicator" value="3" data-slide-to="3" class="cal4"></li> 19 <li data-target="#carouselIndicator" value="4" data-slide-to="4" class="cal5"></li> 20 </ul> 21 <div class="carousel-inner"> 22 <div style="background-color: grey;" class="carousel-item first active"> 23 <div class="caption"> 24 <h2>slide1</h2> 25 </div> 26 </div> 27 <div style="background-color: purple;" class="carousel-item second"> 28 <div class="caption"> 29 <h2>slide2</h2> 30 </div> 31 </div> 32 <div style="background-color: crimson;" class="carousel-item third"> 33 <div class="caption"> 34 <h2>slide3</h2> 35 </div> 36 </div> 37 <div style="background-color: black;" class="carousel-item forth"> 38 <div class="caption"> 39 <h2>slide4</h2> 40 </div> 41 </div> 42 <div style="background-color: cyan;" class="carousel-item fifth"> 43 <div class="caption"> 44 <h2>slide5</h2> 45 </div> 46 </div> 47 </div> 48 </div> 49 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> 50 <script> 51 $(function() { 52 53 54 if ($(".cal1").hasClass('active')) { 55 $("h1").toggleClass('caca1'); 56 } else if ($(".cal2").hasClass('active')) { 57 $("h1").toggleClass('caca2'); 58 } else if ($(".cal3").hasClass('active')) { 59 $('h1').toggleClass('caca3'); 60 } else if ($(".cal4").hasClass('active')) { 61 $('h1').toggleClass('caca4'); 62 } else if ($(".cal5").hasClass('active')) { 63 $('h1').toggleClass('caca5'); 64 }else{ 65 $('h1').css('color','black'); 66 } 67 }); 68 </script> 69 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 70 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> 71</body> 72 73</html>
css
1.carousel-item { 2 width: 100%; 3 height: 500px; 4 } 5 6 .carousel h1 { 7 width: 100%; 8 font-size: 3.6rem; 9 font-weight: 700; 10 letter-spacing: .75rem; 11 position: absolute; 12 z-index: 10; 13 top: 50%; 14 left: 50%; 15 transform: 16 translateX(-50%) translateY(-50%); 17 text-shadow: 1px 1px 1px #a9a9a9; 18 padding-bottom: 5rem; 19 20 21 } 22 23 .caca1 { 24 color: red; 25 transition: color .5s ease-in-out; 26 } 27 28 .caca2 { 29 color: blue; 30 transition: color .5s ease-in-out; 31 } 32 33 .caca3 { 34 color: green; 35 transition: color .5s ease-in-out; 36 } 37 38 .caca4 { 39 color: yellow; 40 transition: color .5s ease-in-out; 41 } 42 43 .caca5 { 44 color: orange; 45 transition: color .5s ease-in-out; 46 }
試したこと
コードを見てもらえればわかるのですが、jQueryで.hasClassと.toggleClassメソッドを条件分岐によって、carousel-indicators内の<li>タグのactiveの位置によってクラスをつけようと思ったのですが、ページを開いた時に、最初<h1>には.caca1がつくみたいなのですが、carouselを動かしても<h1>のクラスはcaca1のままで変わりませんでした。
補足情報(FW/ツールのバージョンなど)
HTML5, CSS3, Bootstrap(v-4.4.1), jQuery(v-3.4.1)
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/28 09:07