在一页中使用 2 个 jquery 第 2 个 jquery ul 和 li 类和样式得到更改答案

【问题标题】：using 2 jquery in one page 2nd jquery ul and li class and style get change在一页中使用 2 个 jquery 第 2 个 jquery ul 和 li 类和样式得到更改
【发布时间】：2013-10-28 07:50:18
【问题描述】：

我的第一个 jquery .css

ol,ul
{
list-style: none;
padding: 0;
margin: 0 auto;
width: 42em;
height: 28em;
}
li
{
height: 24em;
width: 24em;
text-align: center;
cursor: pointer;
}
li img
{
width: 100%;
}
li.roundabout-in-focus
{
cursor: default;
}
li span
{
display: block;
padding-top: 6em;
}
#carbonads-container 
.carbonad
{
margin: 0 auto;
}

.html 代码

<script src="js/jquery_002.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script language="javascript">
    $(document).ready(function () {
        $('ul').roundabout();
    });
</script>
<ul class="roundabout-moveable-item roundabout-in-focus" style="padding: 0px; position: relative;">
<li style="position: absolute; opacity: 1; z-index: 280;" class="roundabout-moveable-item">
<img src="img1.jpg" /></li></ul>

注意：

用图片重复5个li标签，这样显示

它的工作正常

但在同一页面中，我使用了另一个 jquery，它的 .css 类是

.slider {
float:left;
left: -5000px; 
margin:10px; 
position:relative; 
visibility:hidden;  
}   
.slider ul.menu {
height:100px;
width:990px; 
}
.slider ul.menu li.menu1 {
padding:0px 4px 0px 4px;
}
.slider ul.menu li.menu1 img {
cursor:pointer;
height:110px; 
padding-top:0px;
width:177px;  
 }

.html代码是

<script type="text/javascript" src="js1/jcarousellite_1.0.1.pack.js"></script>
<script type="text/javascript" src="js1/captify.tiny.js"></script>
<script type="text/javascript">
    $(function () {
        $(".slider").jCarouselLite({
            btnNext: ".next",
            btnPrev: ".prev",
            visible: 5
        });
    });

    $(document).ready(function () {
        $('img.captify').captify({               
            speedOver: 'fast',
});
    });

</script>

 <div class="slider">
<ul class="menu">
<li class="menu1">
<img src="images/gallery1/1.jpg" border="0" alt="" /></li></ul></div>

注意：重复li标签，它看起来像滑块

但在检查元素上，我看到上面的 ul 类为 class="menu roundabout-holder" 和 li 类为 class="menu1 roundabout-moveable-item roundabout-in-focus"并且风格不同，第二个脚本不起作用

【问题讨论】：

标签： jquery html asp.net css

【解决方案1】：

更改您的第一个 html 文件中的代码，使 javascript 代码如下所示：

$(document).ready(function () {
    $('ul.roundabout-moveable-item').roundabout();
});

现在，roundabout 插件只会影响 '.roundabout-moveable-item' 类的列表，不会触及 '.menu' 类的列表。

【讨论】：

是的，它的工作，但在这里样式显示为 style="overflow: hidden; float: left; width: 384px; height: 384px;"但它应该看起来像 style="overflow: hidden; float: left; width: 177px; height: 115px;"这里宽度和高度发生冲突这是 li
并且 ul 样式看起来像 style="margin: 0px; padding: 0px; position: relative; list-style-type: none; z-index: 1; width: 5880px; left: - 1960像素；"而不是 style="margin: 0px; padding: 0px; position: relative; list-style-type: none; z-index: 1; width: 2775px; left: -925px;"
好点。将“.roundabout-moveable-item”类放在第一个 css 文件中的 ul、ol 和 li 选择器前面，例如：.roundabout-moveable-item ol、.roundabout-moveable-item ul 和 .roundabout-moveable -项目 li 等等。因此，您的第一个 css 文件中的类只会影响 .roundabout-moveable-item 列表的列表元素。
你会吗？？？？ stackoverflow.com/questions/17124349/…
你能把html/asp.net脚本的html输出发给我吗？

【解决方案2】：

在.css中我已经完成了

  ol.rabout, ul.rabout
 {
list-style: none;
padding: 0;
margin: 0 auto;
width: 42em;
height: 28em;
}
.rabout li
{
height: 24em;
width: 24em;
text-align: center;
cursor: pointer;
}
 .rabout li img
{
width: 100%;
}
.rabout li.roundabout-in-focus
 {
cursor: default;
 }
.rabout li span
{
display: block;
padding-top: 6em;
}

和 .html 一样

 <script language="javascript">
    $(document).ready(function () {
        $('ul.rabout').roundabout();
    });
</script>

和向下滑块效果很好，但 mu 上 j 查询现在看起来像

【讨论】：