0
부트 스트랩을 사용하여 탭을 누를 때 페이지의 배경 이미지를 변경하려고합니다. 특정 이미지로 변경할 수 있었지만 활성 탭 ID에서 배경 이미지를 가져 오려고합니다.부트 스트랩 탭 - 본문의 배경 이미지 변경
아이디어가 있으십니까?
부트 스트랩을 사용하여 탭을 누를 때 페이지의 배경 이미지를 변경하려고합니다. 특정 이미지로 변경할 수 있었지만 활성 탭 ID에서 배경 이미지를 가져 오려고합니다.부트 스트랩 탭 - 본문의 배경 이미지 변경
아이디어가 있으십니까?
귀하의 질문에 많은 세부 사항을 제공하지 않으므로 귀하가 성취하고자하는 것을 완전히 확신하지 못했지만 아마도 도움이 될 것입니다.
여기에 방법은 약간의 href
가 navlist에서 텍스트 속성을 가지고 텍스트를 수정, 을 다음 CSS 클래스로 몸에 그 수정 텍스트를 추가하는 것입니다. 그런 다음 배경 이미지 속성과 같은 본문 배경에 대해 CSS 클래스의 스타일 규칙 을 설정하십시오.
HTML
<ul class="nav nav-tabs" id="myNav">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane active">
<p>home</p>
</div>
<div id="profile" class="tab-pane">
<p>profile</p>
</div>
<div id="messages" class="tab-pane">
<p>messages</p>
</div>
<div id="settings" class="tab-pane">
<p>settings</p>
</div>
</div>
자바 스크립트
$('a[data-toggle="tab"]').on('shown', function (e) {
var bodyBgClass = $(this).attr("href").replace("#", "") + "-BgBackground";
$("body").removeClass().addClass(bodyBgClass);
// what is the new class?
console.log(bodyBgClass);
});
// make sure the initial page load activates the tabs
$(function() {
$('#myNav a:first').tab('show');
});
CSS
/* add background image to styles as needed */
.home-BgBackground {
background-color: blue;
color: #fff;
}
.profile-BgBackground {
background-color: yellow;
color: #222;
}
.messages-BgBackground {
background-color: orange;
color: #222;
}
.settings-BgBackground {
background-color: pink;
color: #222;
}