0

ruby on rails アプリケーションに jQuery タブを実装していますが、ナビゲーション バーのタブの背後にバナーを背景画像にしたいと考えています。たとえば、次のjsfiddleでは、猫の写真は「About」タブの後ろの灰色の領域になります。

現在、タブの高さはバナーに合わせて再調整されているように見えますが、表示されず、ナビゲーション バーのデフォルトの灰色の領域のみが表示されます。

ここに私の _tab.html.erb のコードがあります:

<meta charset="utf-8" />

<title>title</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 <link rel="stylesheet" href="/resources/demos/style.css" />
 <script>
 $(function() {
  $("#tabs").tabs({

    });
      });
</script>

コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<%= render "shared/tab"%> 
</head>

<body>

<div id="tabs">

  <ul>
    <li><a href="#tabs-1">About</a></li>  
  </ul>
  <div id="tabs-1">
<%= render "shared/about"%>
  </div>

追加してみました

#tabs{ background-image: url(images/banner2.jpg); }

css ファイルに追加しましたが、これは機能しませんでした。素朴な質問で申し訳ありませんが、よろしくお願いします！ありがとう！！！

4

2 に答える 2

0

タブバーの背景として画像が必要な場合<ul>は、全体ではなく、次の<div>ように操作する必要があります。

#tabs > ul {
    background-image: url(/assets/banner2.jpg)
}

/assets/banner2.jpgサーバーが通常画像を見つける場所であるため、URLをに切り替えました。image_pathこれらのものがたくさんあり、CSS を少し ERB 化することを気にしない場合は、ヘルパーを使用することもできます。

デモ: http://jsfiddle.net/ambiguous/cjU7D/1/

于 2013-07-22T05:53:57.240 に答える
0

タブ div の代わりに、UL の背景にするだけです。

#tabs ul {
     background-image: url(http://placekitten.com/500/100);
}
于 2013-07-22T05:53:59.407 に答える