div滑块不工作
div滑块不工作
提问于 2012-12-22 21:56:34
我在StackOverflow的几个帖子的帮助下创建了一个div滑块，但由于某些原因它不能工作。显示Jquery上有一些错误，我看不到。我需要另一双眼睛
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Previous Next</title>
<style type="text/css">
.table-container {
width:456px; /* Total width of visible columns + border widths */
height:300px;
border:solid 1px #000;
background-color:#eee;
overflow:hidden;
}
.sliding-window {
width:760px; /* Total width of all columns in sliding-window + border widths */
height:300px;
overflow:hidden;
}
.sliding-window div {
float:left;
width:150px;
height:300px;
background-color:#aaa;
border:solid 1px #999;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#next-column').click(function(event) {
event.preventDefault();
$('.table-container').animate({scrollLeft:'+=152'}, 'slow');
});
$('#previous-column').click(function(event) {
event.preventDefault();
$('.table-container').animate({scrollLeft:'-=152'}, 'slow');
});
});
</script>
</head>
<body>
<a id="previous-column" href="#">Previous</a>
<a id="next-column" href="#">Next</a>
<div class="table-container">
<div class="sliding-window">
<div id="col-1">
<p>This is the content of the first column in the sliding table</p>
</div>
<div id="col-2">
<p>This is the content of the second column in the sliding table</p>
</div>
<div id="col-3">
<p>This is the content of the third column in the sliding table</p>
</div>
<div id="col-4">
<p>This is the content of the fourth column in the sliding table</p>
</div>
<div id="col-5">
<p>This is the content of the fifth column in the sliding table</p>
</div>
</div>
</div>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2012-12-22 21:59:40
有几件事你可以试着让它工作。
确保你的脚本被拉到页面中，检查的一种方法是使用Chrome调试器中的‘源’标签，然后在html头部分搜索文件
确保在包含jQuery之后包含了数据设置脚本，因为它肯定依赖于此。
检查jQuery是否正确且仅包含一次。
注意jQuery冲突。还有一些其他的库覆盖了$，所以你的代码不能工作，因为$不再是jQuery的别名了。您可以使用jQuery.noConflict()来避免与页面上使用相同变量$的其他库发生冲突。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14003433
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号