twitter-bootstrap - Bootstrap Tabs - 本文の背景画像を変更

Question

ブートストラップを使用してタブが押されたときにページの背景画像を変更しようとしています。特定の画像に変更できたのですが、アクティブなタブIDから背景画像を引っ張りたいです。

何か案は？

Answer 1

あなたの質問には詳細が記載されていないため、あなたが何を達成しようとしているのか完全にはわかりませんが、おそらくこれが役立つでしょう.

http://jsfiddle.net/2kDxD/

ここでのアプローチはhref、navlist から属性テキストを取得し、テキストをわずかに変更してから、その変更されたテキストを CSS クラスとして本文に追加することです。次に、CSS クラスで background-image プロパティなど、本文の背景に必要なスタイル ルールを設定します。

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;
}