Question

我正在使用Cargo Collective来托管http://cargocollective.com/amytdatta/biography

我有一些jQuery来在传记页面的底部实现一个简单的真/假游戏。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('document').ready(function(){
    $(".showtrue").click(function() { 
        $('.false').css('color','#f5f5f5');
        return false;        
    });

    $(".showfalse").click(function() { 
        $('.false').css('color', '#666666');
        return false;        
    });
});


    $("a").click(function (e) {
        e.preventDefault();
    });

问题是此代码似乎阻止幻灯片显示正确（也在生物页面上）。 3张图像的缩略图无法正确显示，单击上一个/下一个按钮的图像会将我带回货物主页。

这是幻灯片放映css：

/* 
* Slideshows
*/

.slideshow_nav {
color: #999999;
font-size: 11px;
padding-bottom: 10px;
}

.slideshow_nav a {
color: #666666;  
text-decoration: none;  
}

.slideshow_nav a:hover {
background: none !important;
color: #999999;
text-decoration: none;
}

.slideshow_nav a:active {
color: #ff3300;
}

.slideshow_count {
color: #999999;
font-size: 11px;
}

.slideshow_wrapper {
clear: both;
margin: 0 15px 15px 0;
}

#slideshow_container img {
margin: 0;
}

.slideshow_wrapper a, 
.slideshow_wrapper a:hover, 
.slideshow_wrapper a:active {
background: none !important;
}

.slideshow_thumbs {
margin: 7px 0 7px -3px;
}

ul.slideshow_thumbs {
margin: 0;
padding: 0;
}    

.slideshow_thumb {
float: left;
list-style: none;
margin: 0 0 0 -3px;
padding: 0 7px 10px 0;
}

.slideshow_thumb a {
background: none;
border: 1px solid transparent;
display: block;
padding: 2px;
}

.slideshow_thumb a:hover {
background:none;
border: 1px solid #cccccc;
}

a.activeSlide {
background:none;
border: 1px solid #cccccc;
}

.slideshow_thumb a:active, 
a.activeSlide:active {
background: transparent;
border: 1px solid #666666;
}

.slideshow_thumb img {
border: 0;
display: block;
margin: 0;
height: 60px;
}

.slideshow_caption {
clear: both;
display: block;
font-size: 11px;
padding: 5px 0 5px 0;
}

jQuery似乎也覆盖了一些CSS。

例如，我的顶部导航栏不再像以前那样固定到位。

#nav_wrapper {
background: #f5f5f5;
height: 50px;
position: fixed;
left: 0; right: 0; top: 0;
z-index: 999;
}

.feed_nav {
border-bottom: 2px solid #cccccc;
border-bottom: 2px solid rgba(0,0,0,0.20);
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
height: 50px;
line-height: 50px;
margin: 0 auto 0 auto;
padding: 0 35px 0 35px;
position: relative;
width: 905px;
z-index: 999;
}

.feed_nav br {
display: none !important;
}

.feed_nav div {
float: left;
}


.page_nav {
background: f5f5f5;
max-width: ;
overflow: hidden;
}

当启用jQuery时，顶部导航栏和页面标题之间的差距似乎也会增加。

以下是我的内容容器的CSS，各个内容条目和标题

#content_container {
clear: both;
margin: 50px auto 25px auto;
position: relative;
width: 975px;
z-index: 10;
border-bottom: 1px dotted #cccccc;

}

.entry {
background: #f5f5f5;
border-bottom: 0 solid #cccccc;
clear: both;
padding: 35px 35px 50px 35px;
margin: 0 0 0 0;
width: 905px;
}

.project_title {
font-family: Helvetica, Arial, sans-serif;
font-size: 32px;
line-height: 50px;
padding: 0 0 36px 0;
text-rendering: optimizeLegibility;
width: 560px;
}

非常感谢任何有关解决此问题的建议。

干杯！

Answer 1

将您的jquery文件声明为其他文件

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript' src='/_js/cargo.jquery.package.js?12.09.14'></script>
<script type='text/javascript' src='/_js/cargo.site.package.js?12.09.14'></script>
<script type='text/javascript' src='/_js/cargo.tools.package.js?12.09.14'></script>
...............

jQuery搞乱幻灯片和其他CSS

1 个答案: