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 に答える