javascript - 无法在 superslides jquery 插件上加载 ajax 内容

Question

我是 jquery 的新手， 实际上我正在使用 Superslides 插件 Superslides

用于背景并使用前面的 div 使用 ajax 加载其他页面。 现在的问题是，当我加载页面时，例如。使用 jquery ajax 方法的客户端页面加载正常，但主页导航停止工作。我的意思是让用户移动到下一张幻灯片的列表项目不起作用。 也许客户端页面中的列表项与主页列表项冲突，因为我一直在使用 Li 将主页从后一张幻灯片导航到下一张幻灯片。 这是我的代码

这就是我使用 Li 导航设置点击绑定(bind)的方式

幻灯片的jquery代码

        $(document).ready(function () {
        $('.mainMenuListItem').click(function () {
            var currentThumbSel = $(this).attr("data-id");
            $('.slides-pagination a:nth-child(' + currentThumbSel + ')').click();


        });
    });
</script>

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>

<ul id="clientsList">
    <li>

        <div class="overlayClient"><span class="informationZoom">+</span></div>
        <img src="images/clients/eaSports.jpg" />

    </li>
    <li>

        <div class="overlayClient"><span class="informationZoom">+</span></div>
        <img src="images/clients/eaSports.jpg" />

    </li>
    <li>

        <div class="overlayClient"><span class="informationZoom">+</span></div>
        <img src="images/clients/eaSports.jpg" />

    </li>
    <li>

        <div class="overlayClient"><span class="informationZoom">+</span></div>
        <img src="images/clients/eaSports.jpg" />

    </li>

这是 Ajax Load 方法

<script>
    $(document).ready(function () {

        $('#clientsMenuListItem').click(function () {

            $('#clientsAjaxContainer').load('clients.html'); 
        });
    });


</script>

可以看到客户页面也有li，可能和li有些冲突？ 请帮我解决这个问题。 谢谢。

Answer 1

您的 Jquery 似乎发生冲突，请尝试在主站点上加载 jquery 并且不要在子页面中使用它。 谢谢