Jquery 阿贾克斯呼吁画廊

我想要onclick字幕，每一个都有不同的galleria画廊（不是弹出式风格）。我有单独的html页面中的galleria图库，现在我想在我的showcase页面上做一个ajax调用，在单击字幕时打开图库

我哪里做错了

这是迄今为止我的php页面的代码：

    <?
$main_content .= '

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.9.min.js"></script> 

            <style>
            #galleria{ width: 700px; height: 400px; background: #000; } 
            </style>


            <script type="text/javascript">
        $(document).ready(function() {
            $("#agricultural").click(function() {
                changeProduct($(this), $(this));

$("#galleria").load("AgriculturalSlideshow.html");
            });
            $("#commercial").click(function() {
                changeProduct($(this), $(this));

$("#galleria").load("CommercialSlideshow.html");
            });
            $("#community").click(function() {
                changeProduct($(this), $(this));

$("#galleria").load("communityslideshow.html");
            });
            $("#industrial").click(function() {
                changeProduct($(this), $(this));

$("#galleria").load("industrialslideshow.html");
            });
            $("#recreational").click(function() {
                changeProduct($(this), $(this));

$("#galleria").load("recreationalslideshow.html");
            });
            $("#underconstruction").click(function() {
                changeProduct($(this), $(this));

$("#galleria").load("underconstructionslideshow.html");
            });

        function changeProduct(menu, obj){
            $(".productMenu").css({"color":"#000000"});
            $(".prodContent").hide();
            $(menu).css({"color":"#a50000"});
            $(obj).fadeIn();
        }
        });
    </script>
    <div style="padding-top:0px; padding-bottom:50px;">
        <div class="pageHeader">
            SHOWCASE
        </div>
        <div class="content">   
        <div style="padding:20px 0px 20px 0px;">
            <span class="productMenu" id="agricultural" style="cursor:pointer; padding-right:20px; color:#a50000">AGRICULTURAL</span>       
            <span class="productMenu" id="commercial" style="cursor:pointer; padding-right:20px;">COMMERCIAL</span>
            <span class="productMenu" id="community" style="cursor:pointer; padding-right:20px;">COMMUNITY</span>
            <span class="productMenu" id="industrial" style="cursor:pointer; padding-right:20px;">INDUSTRIAL</span>
            <span class="productMenu" id="recreational" style="cursor:pointer; padding-right:20px;">RECREATIONAL</span>
            <span class="productMenu" id="underconstruction" style="cursor:pointer; padding-right:20px;">UNDERCONSTRUCTION</span>             
        </div>
         <div id="galleria"> 
        </div>
        <script>
            Galleria.loadTheme("galleria/themes/classic/galleria.classic.min.js");
            Galleria.run("#galleria");
        </script>




        <div style="clear:both; text-align:justify; text-align-last:justify;padding-top:50px;">
            AGRICULTURAL | COMMERCIAL | RESIDENTIAL & GARAGES | GOVERNMENT | INDUSTRIAL | INSTITUTIONAL | RECREATIONAL
        </div>
        <div style="clear:both"></div>
    </div>';
?>

---

在ajax请求中必须使用URL而不是文件路径，因此

。/AgriculturalSlideshow.html

不起作用。您必须使用不带

。/

的url

包含http://的绝对url或正确的相对url

而您的

jquery单击事件

将被

onclick属性

覆盖。因此，在jquery事件处理程序中调用

changeProduct

，并从span元素中删除onclick属性

changeProduct

中也缺少分号：

     function changeProduct(menu, obj){
        $(".productMenu").css({"color":"#000000"});
        $(".prodContent").hide();
        $(menu).css({"color":"#a50000"});
        $(obj).fadeIn();
    }

看看那把小提琴：

我建议您使用chrome开发者工具或firebug（Firefox）来调试javascript。这样，您就可以轻松地检查语法错误或ajax请求

顺便说一句，参数

菜单

和

obj

完全相同，因此那里的某些功能无法正常工作。但是ajax请求应该可以工作

解决您的其他问题

您可以在字幕下方添加一个div框，然后将所有图库加载到此div框中

<div id="gal_content"></div>

---

很抱歉，当我复制和粘贴代码时，我并不是有意要把它们放在那里。我正在尝试一些东西，因为没有其他东西在工作。请查看我的更新。您定义了两个单击事件。onclick属性和jqueryeventhandler。刚刚尝试过，当我再次单击我的副标题时，什么也没有出现。现在应该可以工作了。你肯定应该开始使用正确的工具进行调试。谢谢你的帮助。它不像我希望的那样工作（当点击时，字幕和图库会变得一团糟），但我会继续努力。

$("#gal_content").load("AgriculturalSlideshow.html");