クラスで表示非表示を切り替え

Question

BookBlockというjsで本みたいな動きをしているのですが
2ページ、3ページ、4ページのときだけ下に説明文を出したいです。
1ページはclass="bb-item"のdivの部分です

<div id="bb-bookblock" class="bb-bookblock">
    <div class="bb-item">
        <!-- custom content -->
        <img src="img/a.jpg" alt="">
        
        
    </div>
    <div class="bb-item" id="model01">
        <!-- custom content -->
        <img src="img/b.jpg" alt="">
        
    </div>
    <div class="bb-item" id="model02">
        <!-- custom content -->
        <img src="img/c.jpg" alt="">
        
    </div>
    <div class="bb-item" id="model03">
        <!-- custom content -->
        <img src="img/d.jpg" alt="">
        
    </div>
    <div class="bb-item">
        <!-- custom content -->
        <img src="img/e.jpg" alt="">
        
        
    </div>
</div>
<nav class="pager">
<a id="bb-nav-first" href="#" >First page</a>
<a id="bb-nav-prev" href="#" >Previous</a>
<a id="bb-nav-next" href="#" >Next</a>
<a id="bb-nav-last" href="#" >Last page</a>
</nav>

Comments

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

[yes111]

すみません。はじめての使用で失礼いたしました。よくわからないのでそのまま貼り付けていました。次回から気をつけます

[kei344]

ここは「質問への追記・修正の依頼」です。質問本文は編集することが可能なので、その依頼をしています。

Answer 1

    <div class="bb-item" id="model01">
        <img src="img/b.jpg" alt="">
        <div class="description">説明文</div>
    </div>

.bb-item .description {
  position: absolute;
  bottom: 0;
}

Answer 2

1ページはclass="bb-item"のdivの部分です

と書いていらっしゃるので、class="bb-item"のdivの部分の表示/非表示を切り替えてページングを実現しているのかな？と推測しました。

もしそうであれば、説明文を出したいブロックの中にpタグで囲った説明文を付ければ良いのではないかと思います。

<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item">
<!-- custom content -->
<img src="img/a.jpg" alt="">

</div>
<div class="bb-item" id="model01">
<!-- custom content -->
<img src="img/b.jpg" alt="">
<p>２ページ目の説明</p>

</div>
<div class="bb-item" id="model02">
<!-- custom content -->
<img src="img/c.jpg" alt="">
<p>３ページ目の説明</p>

</div>
<div class="bb-item" id="model03">
<!-- custom content -->
<img src="img/d.jpg" alt="">
<p>４ページ目の説明</p>

</div>
<div class="bb-item">
<!-- custom content -->
<img src="img/e.jpg" alt="">

</div>
</div>
<nav class="pager">
<a id="bb-nav-first" href="#" >First page</a>
<a id="bb-nav-prev" href="#" >Previous</a>
<a id="bb-nav-next" href="#" >Next</a>
<a id="bb-nav-last" href="#" >Last page</a>
</nav>

もし表示が崩れてしまうようなら、説明文を「pタグで囲う」ではなく「brタグで改行する」に変えてみてください。

例：４ページ目

<img src="img/d.jpg" alt="">
<p>４ページ目の説明</p>

↓

<img src="img/d.jpg" alt="">
<br>４ページ目の説明

※</br>はつけませんのでご注意を。

Comments

[yes111]

ご回答ありがとうございます。
外側のbb-bookblockのブロックにそのまま入れれば表示できるのですね。
設定のCSSもありがとうございます。

光が見えました！こちらでいけそうです。
ご教授ありがとうございます

[nak]

解決しそうなら何よりです。
なお、CSSを書いてくださったのは別の方（x_xさん）です、念のため。
※CSSによる表示崩れ対策がある分、私の回答より親切な内容だと思います。

解決したら、いずれかの回答にベストアンサーをつけて、質問をCLOSEしていただけると幸いです。
https://teratail.com/help/question-tips#questionTips4

Answer 3

ページャーの表記があるということはページの遷移をするのでしょうか？
それなら、サーバー側のプログラムで適当にclassを付け替えて下さい
遷移がないのであれば切り替えをする処理があると思うので
そこで当該部分の表示をするかしないかをあわせて指示すればいいでしょう

Comments

[yes111]

ご回答ありがとうございます。
ページは遷移しません。
https://tympanus.net/Development/BookBlock/
のような形で1ページのなかでの動きです。
ページャーというのは次へボタンの部分です。

bb-itemの部分に処理を入れるということでしょうか