Bootstrap選項卡 - 更改身體的背景圖像

Question

嘗試使用引導按下選項卡時更改頁面的背景圖像。我能夠將其更改爲特定圖像，但我想從活動選項卡標識中拉出背景圖像。

任何想法？

Answer 1

你沒有在你的問題中提供太多的細節，所以我不完全確定你正在努力完成什麼，但也許這有助於。

http://jsfiddle.net/2kDxD/

這裏的方法是採取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> 

的JavaScript

$('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; 
}