Site Gallery

【jQuery】タブの切り替えメニューの実装方法

2021.09.08

今回は、jQueryを使ってタブの切り替えメニューの実装方法を紹介します。

タブ切り替えはページの幅を取らずにコンテンツを切り替えることが出来るので、良くWEBサイトで使われている実装です。

【jQuery】タブの切り替えメニューの実装方法

完成形はこちらです。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

試しにタブをクリックして表示が切り替わるか確認してみてください。

それではコードを見ていきましょう。

HTML

<div class="news-nav">
    <ul id="news-nav">
        <li class="tab is-active">カテゴリー1</li>
        <li class="tab">カテゴリー2</li>
        <li class="tab">カテゴリー3</li>
        <li class="tab">カテゴリー4</li>
        <li class="tab">カテゴリー5</li>
    </ul>
</div>

<section class="news-block is-show">
    <div id="news-block">
        <div class="news-block__wrap">
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ1</span></dd>
                <dd class="news-block__title">
                    <a href="">ああああああああああ</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ2</span></dd>
                <dd class="news-block__title">
                    <a href="">ああああああああああ</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ3</span></dd>
                <dd class="news-block__title">
                    <a href="">ああああああああああ</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ4</span></dd>
                <dd class="news-block__title">
                    <a href="">ああああああああああ</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ5</span></dd>
                <dd class="news-block__title">
                    <a href="">ああああああああああ</a>
                </dd>
            </dl>

        </div>

        <a href="" class="news-block__button">もっとニュースを見る</a>

    </div>
</section>

<section class="news-block">
    <div id="news-block">
        <div class="news-block__wrap">
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ1</span></dd>
                <dd class="news-block__title">
                    <a href="">いいいいいいいいいい</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ2</span></dd>
                <dd class="news-block__title">
                    <a href="">いいいいいいいいいい</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ3</span></dd>
                <dd class="news-block__title">
                    <a href="">いいいいいいいいいい</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ4</span></dd>
                <dd class="news-block__title">
                    <a href="">いいいいいいいいいい</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ5</span></dd>
                <dd class="news-block__title">
                    <a href="">いいいいいいいいいい</a>
                </dd>
            </dl>
        
        </div>

        <a href="" class="news-block__button">もっとニュースを見る</a>

    </div>
</section>

<section class="news-block">
    <div id="news-block">
        <div class="news-block__wrap">
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ1</span></dd>
                <dd class="news-block__title">
                    <a href="">うううううううううう</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ2</span></dd>
                <dd class="news-block__title">
                    <a href="">うううううううううう</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ3</span></dd>
                <dd class="news-block__title">
                    <a href="">うううううううううう</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ4</span></dd>
                <dd class="news-block__title">
                    <a href="">うううううううううう</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ5</span></dd>
                <dd class="news-block__title">
                    <a href="">うううううううううう</a>
                </dd>
            </dl>
        
        </div>

        <a href="" class="news-block__button">もっとニュースを見る</a>

    </div>
</section>

<section class="news-block">
    <div id="news-block">
        
        <div class="news-block__wrap">
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ1</span></dd>
                <dd class="news-block__title">
                    <a href="">ええええええええええ</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ2</span></dd>
                <dd class="news-block__title">
                    <a href="">ええええええええええ</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ3</span></dd>
                <dd class="news-block__title">
                    <a href="">ええええええええええ</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ4</span></dd>
                <dd class="news-block__title">
                    <a href="">ええええええええええ</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ5</span></dd>
                <dd class="news-block__title">
                    <a href="">ええええええええええ</a>
                </dd>
            </dl>
        
        </div>

        <a href="" class="news-block__button">もっとニュースを見る</a>

    </div>
</section>

<section class="news-block">
    <div id="news-block">
        
        <div class="news-block__wrap">
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ1</span></dd>
                <dd class="news-block__title">
                    <a href="">おおおおおおおおおお</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ2</span></dd>
                <dd class="news-block__title">
                    <a href="">おおおおおおおおおお</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ3</span></dd>
                <dd class="news-block__title">
                    <a href="">おおおおおおおおおお</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ4</span></dd>
                <dd class="news-block__title">
                    <a href="">おおおおおおおおおお</a>
                </dd>
            </dl>
            <dl>
                <dt>2021/09/06</dt>
                <dd><span>タグ5</span></dd>
                <dd class="news-block__title">
                    <a href="">おおおおおおおおおお</a>
                </dd>
            </dl>
        
        </div>

        <a href="" class="news-block__button">もっとニュースを見る</a>

    </div>
</section>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

<li class="tab is-active">カテゴリー1</li>

<li class="tab">カテゴリー2</li>

<li class="tab">カテゴリー3</li>

<li class="tab">カテゴリー4</li>

<li class="tab">カテゴリー5</li>

</ul>

</div>

<dl>

<a href="">ああああああああああ</a>

</dd>

</dl>

<dl>

<a href="">ああああああああああ</a>

</dd>

</dl>

<dl>

<a href="">ああああああああああ</a>

</dd>

</dl>

<dl>

<a href="">ああああああああああ</a>

</dd>

</dl>

<dl>

<a href="">ああああああああああ</a>

</dd>

</dl>

</div>

<a href="" class="news-block__button">もっとニュースを見る</a>

</div>

</section>

<dl>

<a href="">いいいいいいいいいい</a>

</dd>

</dl>

<dl>

<a href="">いいいいいいいいいい</a>

</dd>

</dl>

<dl>

<a href="">いいいいいいいいいい</a>

</dd>

</dl>

<dl>

<a href="">いいいいいいいいいい</a>

</dd>

</dl>

<dl>

<a href="">いいいいいいいいいい</a>

</dd>

</dl>

</div>

<a href="" class="news-block__button">もっとニュースを見る</a>

</div>

</section>

<dl>

<a href="">うううううううううう</a>

</dd>

</dl>

<dl>

<a href="">うううううううううう</a>

</dd>

</dl>

<dl>

<a href="">うううううううううう</a>

</dd>

</dl>

<dl>

<a href="">うううううううううう</a>

</dd>

</dl>

<dl>

<a href="">うううううううううう</a>

</dd>

</dl>

</div>

<a href="" class="news-block__button">もっとニュースを見る</a>

</div>

</section>

<dl>

<a href="">ええええええええええ</a>

</dd>

</dl>

<dl>

<a href="">ええええええええええ</a>

</dd>

</dl>

<dl>

<a href="">ええええええええええ</a>

</dd>

</dl>

<dl>

<a href="">ええええええええええ</a>

</dd>

</dl>

<dl>

<a href="">ええええええええええ</a>

</dd>

</dl>

</div>

<a href="" class="news-block__button">もっとニュースを見る</a>

</div>

</section>

<dl>

<a href="">おおおおおおおおおお</a>

</dd>

</dl>

<dl>

<a href="">おおおおおおおおおお</a>

</dd>

</dl>

<dl>

<a href="">おおおおおおおおおお</a>

</dd>

</dl>

<dl>

<a href="">おおおおおおおおおお</a>

</dd>

</dl>

<dl>

<a href="">おおおおおおおおおお</a>

</dd>

</dl>

</div>

<a href="" class="news-block__button">もっとニュースを見る</a>

</div>

</section>

タブメニューと日付やタイトルといったコンテンツを実装します。

CSS

#news-nav {
    max-width: 1170px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
#news-nav li {
    width: calc((100% / 5) - 10px);
    display: block;
    border-bottom: solid 2px #e0e0e0;
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    color: #999;
    font-weight: bold;
    padding-bottom: 5px;
}

@media (max-width: 600px) {
    #news-nav li {
        width: auto;
        min-width: 85px;
        flex-shrink: 0;
        -webkit-flex-shrink: 0;
        border-bottom: solid 2px #e0e0e0;
        overflow: hidden;
        margin: 0 4px;
        line-height: 30px;
        padding: 0 5px;
        font-size: 13px;
    }
}
#news-nav li:hover {
    border-bottom: solid 6px #4C97BE;
    font-weight: bold;
    cursor: pointer;
    color: #333;
}
#news-nav .is-active {
    border-bottom: solid 6px #4C97BE;
    font-weight: bold;
    cursor: pointer;
    color: #333;
}
@media (max-width: 600px) {
    .news-nav {
        overflow-x: auto;
    }
    #news-nav {
        width: max-content;
        margin: 0 auto;
    }
}
.news-block__wrap {
    max-width: 1170px;
    margin: 0 auto;
}
.news-block__wrap dl {
    margin-top: 24px;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
}
.news-block {
    display: none;
}
.news-block.is-show {
    display: block;
}
@media (max-width: 600px) {
    .news-block__wrap dl {
        flex-wrap: wrap;
    }
    .news-block__title {
        margin-top: 10px;
    }
}
.news-block__wrap dl dt {
    font-size: 12px;
    color: #666;

}
.news-block__wrap dl dd:first-child {
    font-size: 12px;
    min-width: 104px;
    padding-right: 10px;
}
.news-block__wrap dl dd span {
    width: 92px;
    text-align: center;
    color: #FFF;
    background: #666;
    padding: 3px 10px;
    display: inline-block;
    margin: 0 25px;
}
.news-block__wrap dl dd a {
    color: #000;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
}
.news-block__wrap dl dd a:hover {
    text-decoration: underline;
}
.news-block__button {
    width: 240px;
    border: 1px solid #DFDFDF;
    border-radius: 4px;
    color: #666;
    background: #F9F9F9;
    font-size: 14px;
    padding: 14px 10px;
    margin: 30px auto 0;
    display: block;
    text-align: center;
    font-weight: bold;
    position: relative;
    line-height: 1.2;
    text-decoration: none;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

#news-nav {

max-width: 1170px;

width: 100%;

margin: 0 auto;

display: flex;

justify-content: space-between;

}

#news-nav li {

width: calc((100% / 5) - 10px);

display: block;

border-bottom: solid 2px #e0e0e0;

text-decoration: none;

text-align: center;

font-size: 16px;

color: #999;

font-weight: bold;

padding-bottom: 5px;

}

@media (max-width: 600px) {

#news-nav li {

width: auto;

min-width: 85px;

flex-shrink: 0;

-webkit-flex-shrink: 0;

border-bottom: solid 2px #e0e0e0;

overflow: hidden;

margin: 0 4px;

line-height: 30px;

padding: 0 5px;

font-size: 13px;

}

#news-nav li:hover {

border-bottom: solid 6px #4C97BE;

font-weight: bold;

cursor: pointer;

color: #333;

}

#news-nav .is-active {

border-bottom: solid 6px #4C97BE;

font-weight: bold;

cursor: pointer;

color: #333;

}

@media (max-width: 600px) {

.news-nav {

overflow-x: auto;

}

#news-nav {

width: max-content;

margin: 0 auto;

}

.news-block__wrap {

max-width: 1170px;

margin: 0 auto;

}

.news-block__wrap dl {

margin-top: 24px;

margin-bottom: 0;

display: flex;

flex-wrap: wrap;

}

.news-block {

display: none;

}

.news-block.is-show {

display: block;

}

@media (max-width: 600px) {

.news-block__wrap dl {

flex-wrap: wrap;

}

.news-block__title {

margin-top: 10px;

}

.news-block__wrap dl dt {

font-size: 12px;

color: #666;

}

.news-block__wrap dl dd:first-child {

font-size: 12px;

min-width: 104px;

padding-right: 10px;

}

.news-block__wrap dl dd span {

width: 92px;

text-align: center;

color: #FFF;

background: #666;

padding: 3px 10px;

display: inline-block;

margin: 0 25px;

}

.news-block__wrap dl dd a {

color: #000;

font-size: 14px;

line-height: 1.5;

text-decoration: none;

}

.news-block__wrap dl dd a:hover {

text-decoration: underline;

}

.news-block__button {

width: 240px;

border: 1px solid #DFDFDF;

border-radius: 4px;

color: #666;

background: #F9F9F9;

font-size: 14px;

padding: 14px 10px;

margin: 30px auto 0;

display: block;

text-align: center;

font-weight: bold;

position: relative;

line-height: 1.2;

text-decoration: none;

}

タブメニュー切り替えに関する箇所を解説していきます。

◎40~45行目

「is-acrive」が付いたら、border線やフォントが濃くなるようにします。

◎65~70行目

news–blockに当たる要素は通常は表示せずに、「is-show」がついた時だけ表示するようにします。

jQuery

jQueryのCDNコードはこちら。

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

1	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

そして、タブメニュー切り替えのコードはこちら。

jQuery(function($){
  $('.tab').click(function(){
    $('.is-active').removeClass('is-active');
    $(this).addClass('is-active');
    $('.is-show').removeClass('is-show');

    const index = $(this).index();

      $('.news-block').eq(index).addClass('is-show');
  });
});