質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

497閲覧

Bootstrapのactiveの変化によってclassを切り替えたい。

ShoYama

総合スコア11

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/01/28 00:25

前提・実現したいこと

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)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

イベントを拾えば出来ると思います。

【#events Carousel · Bootstrap】
https://getbootstrap.com/docs/4.0/components/carousel/#events

【Bootstrap4でスライド表示(carousel) - Qiita】
https://qiita.com/reflet/items/2670dd0398a2d8e9f493

投稿2020/01/28 02:37

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ShoYama

2020/01/28 09:07

Bootstrapのイベントは盲点でした。。。 おかげで上手く行きました!ありがとうございました!
guest

0

carousel-indicators内の<li>のクラスを全てcalに
cssのcaca1,caca2...caca5をcaca0,caca1...caca4にそれぞれ修正を加えてさらに、script内に

jQuery

1 $(function() { 2 3$('.cal').click(function() { 4var i = $('.cal').index(this); 5$('h1').removeClass(); 6$('h1').toggleClass('caca' + i); 7console.log('caca' + i); 8}); 9$('#carouselIndicator').on('slide.bs.carousel', (e) => { 10$('h1').removeClass(); 11$('h1').toggleClass('caca' + e.to); 12}); 13});

とすることで、思い通りに行きました!ページを開いた時、最初は、h1で設定した色になってしまうので、予めh1の色をcssで設定しておくと綺麗に色が変化します。

投稿2020/01/28 09:04

ShoYama

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問