Question

我正在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文件，但这不起作用。如果这是一个简单的问题我道歉，但任何帮助将不胜感激！感谢!!!

Answer 1

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

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

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

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

Answer 2

只需将其作为UL的背景，而不是制表符div。

#tabs ul {
     background-image: url(http://placekitten.com/500/100);
}

选项卡背后的jquery UI横幅背景图像

2 个答案: