Question

所以，我正在尝试构建一个包含jQuery-ui选项卡的网页，每个选项卡中都会有一个不同填充的轮播。在做了大量研究之后，问题似乎是CarouFredSel的标签与jQuery-ui的标签（或其他）冲突。

我对JQuery/js/CSS/HTML/Ruby on Rails很新，所以解决这个问题我遇到了很多麻烦。

现在，我只是想让这个例子起作用：http://coolcarousels.frebsite.nl/c/8/

但标签仍然完全没有。另一个StackOverflow问题告诉我在display: block行上使用“！important”来覆盖jQuery-ui，它显然默认为隐藏，但是没有用。

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <script src=<%= asset_path( "jquery.carouFredSel-6.2.1.js" ) %></script>
  <script src=<%= asset_path( "jQuery.js" ) %></script>

  <style>

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}
body {
    min-height: 600px;
}
body * {
    font-family: Arial, Geneva, SunSans-Regular, sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 22px;
}

#wrapper {
    background-color: #F4F0EE;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    width: 100%;
    height: 275px;
    padding-top: 25px;
    margin: -150px 0 0 0;
    position: absolute;
    left: 0;
    top: 50%;

}
#tabs > div {
    width: 700px;
    height: 250px;
    float: left;
    overflow: hidden;
}
#tabs img {
    display: block;
    margin: 0 25px 0 0;
    float: left;

}
#tabs h3 {
    font-size: 30px;
    line-height: 20px;
    margin: 60px 0 20px 0;

}

#pager {
    width: 700px;
    margin: -76px auto 25px auto;
    text-align: center;

}
#pager a {
    border: 1px solid transparent;
    border-bottom: none;
    border-left: none;
    border-color: #ccc;
    color: #999;
    font-size: 20px;
    text-decoration: none;
    line-height: 30px;
    display: inline-block;
    height: 30px;
    padding: 10px 30px;

}
#pager a:hover {
    color: #666;

}
#pager a:first-child {
    border-left: 1px solid #ccc;

}
#pager a.selected {
    background-color: #F4F0EE;
    color: #333;

}

#tabs #blue img {
    margin-top: 30px;

}
#tabs #pink img {
    margin-top: 0;
}
#tabs #white img {
    margin-top: 50px;
}

#source {
    text-align: center;
    width: 400px;
    margin: 0 0 0 -200px;
    position: absolute;
    bottom: 10px;
    left: 50%;

}
#source, #source a {
    color: #999;
    font-size: 12px;

}

  </style>
  <script>
$(function() {
    $('#tabs').carouFredSel({
        circular: false,
        items: 1,
        width: '100%',
        auto: false,
        pagination: {
            container: '#pager',
            anchorBuilder: function( nr ) {
                return '<a href="#">' + $(this).find('h3').text() + '</a>';
            }
        }
    });
});
  </script>

</head>
<body>

<div id="wrapper">
    <div id="tabs">
        <div id="blue">
            <img src=<%=  asset_path( "blue_muffin.png" ) %> alt="blue_muffin" width="148" height="185" />
            <h3>Cupcake ipsum</h3>
            <p>Cupcake ipsum dolor sit amet pie pudding tiramisu. Powder biscuit oat cake jelly-o jelly beans danish cookie. Jelly carrot cake topping souffl&eacute; topping brownie apple pie lemon drops sweet roll. Gummi bears danish lollipop. Jelly-o chocolate bar halvah jelly beans. Bonbon sesame snaps wafer. Applicake croissant donut sugar plum drag&eacute;e. Sweet oat cake danish.</p>
        </div>
        <div id="pink">
            <img src=<%=  asset_path( "light_pink_muffin.png" ) %>  alt="light_pink_muffin" width="151" height="245"/>
            <h3>Sesame snaps</h3>
            <p>Sesame snaps tootsie roll donut. Sweet roll candy canes chocolate bar wafer sweet roll gummies topping gummi bears. Pudding cheesecake cookie. Muffin sweet roll tart tart muffin. Pastry pudding marshmallow cupcake cake toffee toffee bonbon topping. Apple pie cupcake caramels. Icing chocolate bar lemon drops caramels bonbon bear claw.</p>
        </div>
        <div id="white">
            <img src=<%=  asset_path( "white_muffin.png" ) %>  alt="white_muffin" width="144" height="153"/>
            <h3>Apple pie jelly</h3>
            <p>Apple pie jelly gingerbread gummies topping. Gingerbread jelly marshmallow oat cake wafer lollipop. Cupcake chocolate cake apple pie. Caramels lollipop croissant bear claw brownie carrot cake wafer halvah lollipop. Candy canes tootsie roll jelly-o. Liquorice sugar plum sweet icing tiramisu.</p>
        </div>
    </div>
</div>
<p id="source">Source: <a href="http://cupcakeipsum.com" target="_blank">cupcakeipsum.com</a></p>

</body>
</html>

我意识到代码看起来有点粗糙;我一直在测试，复制和删除很多东西。如果这是一个问题，我可以清理它。

有人能指出我正确的方向吗？

jQuery-ui与CarouFredSel冲突

0 个答案: