Javascript 无法在superslides jquery插件上加载ajax内容
我是jquery的新手, 实际上,我正在使用Superslides插件 作为背景,并使用前面的div加载其他使用ajax的页面。 现在的问题是,当我使用jqueryajax方法加载页面(例如clients页面)时,它加载得很好,但随后主页导航停止工作。我的意思是列出那些让用户移动到下一张幻灯片的项目是不起作用的。 可能客户端页面中的列表项与主页列表项冲突,因为我一直在使用Li将主页从后一张幻灯片导航到下一张幻灯片。 这是我的密码 这就是我如何使用Li导航设置单击绑定的方法 幻灯片的jquery代码Javascript 无法在superslides jquery插件上加载ajax内容,javascript,jquery,html,Javascript,Jquery,Html,我是jquery的新手, 实际上,我正在使用Superslides插件 作为背景,并使用前面的div加载其他使用ajax的页面。 现在的问题是,当我使用jqueryajax方法加载页面(例如clients页面)时,它加载得很好,但随后主页导航停止工作。我的意思是列出那些让用户移动到下一张幻灯片的项目是不起作用的。 可能客户端页面中的列表项与主页列表项冲突,因为我一直在使用Li将主页从后一张幻灯片导航到下一张幻灯片。 这是我的密码 这就是我如何使用Li导航设置单击绑定的方法 幻灯片的jquery代
$(document).ready(function () {
$('.mainMenuListItem').click(function () {
var currentThumbSel = $(this).attr("data-id");
$('.slides-pagination a:nth-child(' + currentThumbSel + ')').click();
});
});
</script>
$(文档).ready(函数(){
$('.mainMenuListItem')。单击(函数(){
var currentThumbSel=$(this.attr(“数据id”);
$('.slides为第n个子项('+currentThumbSel+')分页。单击();
});
});
html导航代码是
<div id="mainMenuStrip">
<ul id="mainMenuList">
<li class="mainMenuListItem" id="homeMenuListItem" data-id="1">HOME |</li>
<li class="mainMenuListItem" data-id="2">ABOUT |</li>
<li class="mainMenuListItem" id="clientsMenuListItem" data-id="3">CLIENTS |</li>
<li class="mainMenuListItem" data-id="4">HOW WE WORK | </li>
<li class="mainMenuListItem" data-id="5">OUR PROJECTS |</li>
<li class="mainMenuListItem" data-id="6">DOWNLOAD TOOLS |</li>
<li class="mainMenuListItem" data-id="7">CONTACT</li>
</ul>
</div>
主页|
关于|
客户机|
我们的工作方式
我们的项目|
下载工具|
联系人
现在客户端页面代码为
<style>
#clientsList {
list-style-type: none;
width: 810px;
height: 460px;
margin: 0px;
padding: 0px;
}
#clientsList li {
float: left;
height: 150px;
margin-left: 4px;
margin-top: 7px;
width: 265px;
background-color: black;
cursor: pointer;
}
body {
margin: 0px;
}
.overlayClient {
position: absolute;
height: 150px;
width: 265px;
z-index: 2;
background-color: red;
opacity: 0.7;
display: none;
}
.informationZoom {
color: white;
font-family: verdana;
font-size: 51px;
margin-left: 115px;
float: left;
font-weight: bold;
margin-top: 38px;
}
</style>
<script>
$(document).ready(function() {
//$('#clientsList>li').mouseenter(function() {
// $(this).find(".overlayClient").fadeIn(500);
//});
});
$(document).ready(function () {
//$('#clientsList>li').mouseleave(function () {
// $(this).find(".overlayClient").fadeOut(500);
//});
});
</script>
<script>
$(document).ready(function () {
$('#clientsMenuListItem').click(function () {
$('#clientsAjaxContainer').load('clients.html');
});
});
</script>
#客户名单{
列表样式类型:无;
宽度:810px;
高度:460px;
边际:0px;
填充:0px;
}
#客户李{
浮动:左;
高度:150像素;
左边距:4倍;
边缘顶部:7px;
宽度:265px;
背景色:黑色;
光标:指针;
}
身体{
边际:0px;
}
.过度循环{
位置:绝对位置;
高度:150像素;
宽度:265px;
z指数:2;
背景色:红色;
不透明度:0.7;
显示:无;
}
.informationZoom{
颜色:白色;
字体系列:verdana;
字体大小:51px;
左边距:115px;
浮动:左;
字体大小:粗体;
边缘顶部:38px;
}
$(文档).ready(函数(){
//$('#clientsList>li').mouseenter(函数(){
//$(this.find(“.overcyclient”).fadeIn(500);
//});
});
$(文档).ready(函数(){
//$('#clientsList>li').mouseleave(函数(){
//$(this.find(“.overcyclient”).fadeOut(500);
//});
});
-
+
-
+
-
+
-
+
这里是Ajax加载方法
<style>
#clientsList {
list-style-type: none;
width: 810px;
height: 460px;
margin: 0px;
padding: 0px;
}
#clientsList li {
float: left;
height: 150px;
margin-left: 4px;
margin-top: 7px;
width: 265px;
background-color: black;
cursor: pointer;
}
body {
margin: 0px;
}
.overlayClient {
position: absolute;
height: 150px;
width: 265px;
z-index: 2;
background-color: red;
opacity: 0.7;
display: none;
}
.informationZoom {
color: white;
font-family: verdana;
font-size: 51px;
margin-left: 115px;
float: left;
font-weight: bold;
margin-top: 38px;
}
</style>
<script>
$(document).ready(function() {
//$('#clientsList>li').mouseenter(function() {
// $(this).find(".overlayClient").fadeIn(500);
//});
});
$(document).ready(function () {
//$('#clientsList>li').mouseleave(function () {
// $(this).find(".overlayClient").fadeOut(500);
//});
});
</script>
<script>
$(document).ready(function () {
$('#clientsMenuListItem').click(function () {
$('#clientsAjaxContainer').load('clients.html');
});
});
</script>
$(文档).ready(函数(){
$('#clientsMenuListItem')。单击(函数(){
$('#clientsAjaxContainer').load('clients.html');
});
});
您可以看到客户端页面也包含li,可能与li有冲突???
请帮我做这个。
谢谢。您的Jquery似乎有冲突,请尝试在主站点加载Jquery,不要在子页面中使用它。
感谢在末尾添加了Ajax方法。是的,这就是问题所在,我删除了child上的jquery,它就可以工作了。谢谢