1

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

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

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

幻灯片的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 发生冲突？？ 请帮助我。谢谢。

4

1 回答 1

0

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

于 2013-09-01T14:54:37.413 回答