タブ切り替え時にタイトルを変更する(jquery)

2020/8/15 html

javascript（タブ切り替え時の処理）

<script type="text/javascript">
    $(function() {
        $('.tab-list li').click(function() {
            var index = $('.tab-list li').index(this);
            $('.tab-list li').removeClass('active');
            $(this).addClass('active');
            $('.tab-box .tab-content').removeClass('open').eq(index).addClass('open');
            if (index === 0) {
                $('title').html('タブ０１タイトル');
            } else if (index === 1) {
                $('title').html('タブ０２タイトル');
            } else if (index === 2) {
                $('title').html('タブ０３タイトル');
            } else {
                $('title').html('タブ０１タイトル');
            }
        });
    });
</script>

html

<body>
	<title>タブ０１タイトル初期表示</title>
	<!-- タブメニュー -->
	<ul class="tab-list">
		<li class="active">タブ01</li>
		<li>タブ02</li>
		<li>タブ03</li>
	</ul>
	<div class="tab-box">
		<div class="tab-content open">タブ０１</div>
		<div class="tab-content">タブ０２</div>
		<div class="tab-content">タブ０３</div>
	</div>
</body>