尝试通过单击jquery幻灯片中的链接图像来更新页面#content div的内容 [英] Trying to update the content of the #content div of a page by clicking a linked image in a jquery slideshow
问题描述
尽管我是jquery的新手，但我真的很困惑.
I'm really stumped on this one, although I am new to jquery.
我正在尝试创建一个页面，该页面的顶部有一个产品幻灯片放映，并且通过单击其中一个产品，该页面将使用服务器中的页面来更新主要的#content div.我正在使用.load()函数以获取Ajax调用来调出页面.另外，我正在使用event.preventDefault()，以便单击链接不会完全更改页面.
I am trying to create a page where I have a slide show of products at the top and that by clicking on one of the products, the page would update the main #content div with a page from my server. I'm using the .load() function in order to get an ajax call to bring up the page. Additionally I'm using event.preventDefault() so that the click of the link doesn't change the page completely.
不知道我现在在做什么错.任何帮助将不胜感激.
No clue what I'm doing wrong at this point. Any help would be greatly appreciated.
我也一直在寻找其他插件来做我想做的事情，但是没有成功.
Also I've looked for other plugins to do what I'm trying to do, but with no success.
到目前为止我所做的:
将代码粘贴到此jsfiddle中，因为stackoverflow一直抱怨我没有正确格式化它.轮播也有CSS，但这似乎工作正常.我可以根据需要添加它
Code was pasted into this jsfiddle because stackoverflow kept complaining that I didn't have it formatted right. There is also css for the carousel but that seems to be working fine. I can include it if needed
<div id="wrap">
<div id="mycarousel" class="jcarousel-skin-tango">
<ul>
<li><a href="page1.html"><img src="img1.png"alt="" /></a></li>
<li><a href="page2.html"><img src="img2.png"alt="" /></a></li>
<li><a href="page3.html"><img src="img3.png"alt="" /></a></li>
<li><a href="page4.html"><img src="img4.png"alt="" /></a></li>
<li><a href="page5.html"><img src="img5.png"alt="" /></a></li>
</ul>
<div class="jcarousel-scroll">
<form action="">
<a href="#" id="mycarousel-prev">« Prev</a>
<a href="#" id="mycarousel-next">Next »</a>
</form>
</div>
</div>
<div id="content">
Show the content
</div>
</div>
jQuery代码摆在摆弄的位置，因为即使前后都有转义字符，堆栈溢出也不喜欢
The jquery code is in the fiddle because stack overflow didn't like it even with the escape character before and after
推荐答案
我对您的jsfiddle进行了几处更改，这是第一个将框架设置为jQuery的问题，它修复了a标签从页面导航离开的问题，我已从javascript窗口中删除了脚本标签，从而清除了输出开头的垃圾，当您尝试获取ID为content的元素时，我修复了jQuery选择器中缺失的#
I've made several changes to your jsfiddle, the first to set the framework to jQuery, which fixed the a tags navigating away from the page, I've removed the script tags from the javascript window, which cleared the junk at the beginning of the output, and I've fixed the missing # from the jQuery selector when you're trying to get the element with the id of content.
我已经在jsfiddle之外测试了代码，可以确认它现在对我有用，但是在jsfiddle中不起作用，因为链接到的页面不在jsfiddle域中.
I've tested the code outside of jsfiddle and can confirm that it now works for me, but won't work in jsfiddle as the pages you've linked to don't exist on the jsfiddle domain.
这篇关于尝试通过单击jquery幻灯片中的链接图像来更新页面#content div的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
