0

我正在一个 ruby​​ on rails 应用程序中实现 jQuery 选项卡，其中我希望有一个横幅作为导航栏中选项卡后面的背景图像。例如，在下面的jsfiddle中，猫的图片将位于“关于”选项卡后面的灰色区域中。

目前，选项卡的高度似乎会重新调整以适合横幅，但它不会显示，并且只显示导航栏的默认灰色区域。

这是我的 _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

如果您希望图像作为标签栏的背景，那么您需要使用 the<ul>而不是整体<div>，如下所示：

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

我将 URL 切换到，/assets/banner2.jpg因为这是服务器通常会找到图像的地方。image_path如果你有很多这些东西并且不介意对你的 CSS 进行一点 ERB 化，你也可以使用帮助器。

演示：http: //jsfiddle.net/ambiguous/cjU7D/1/

于 2013-07-22T05:53:57.240 回答
0

只需将其作为 UL 的背景，而不是选项卡 div。

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