0

さて、うまくいけば、これを効果的に説明できるので、ここに行きます。

「サービス」ページのjqueryを介してクリックすると、各リストアイテムがhtmlページをdivにロードする順序付けられていないリストがあります。

基本的にフロントページにはいくつかのリンクがあります。1つをクリックすると、「サービス」に移動してdiv内の適切なhtmlページを表示する必要があります。

コードは次のとおりです。

サービスページ：

<ul id="service-nav">

            <li><a id="interlocking" href="#">Interlocking</a></li>
            <li><a id="pool-backfill" href="#">Pool Backfill</a></li>
            <li><a id="poured-concrete" href="#">Poured Concrete</a></li>
            <li><a id="parging" href="#">Parging</a></li>
            <li><a id="custom-land" href="#">Custom Landscaping</a></li>
            <li><a id="snow-rem" href="#">Snow Removal</a></li>
            <li><a id="excavation" href="#">Excavation</a></li></ul>
      </ul>

    <div id="right-area"> <!-- This is where we load the relevant html's -->
    </div>

表紙：

        <ul>
            <li><a href="services.php?token=interlocking">Interlocking</a></li>
            <li><a href="services.php?token=pool-backfill">Pool Backfill</a></li>
            <li><a href="services.php?token=poured-concrete">Poured Concrete</a></li>
        </ul>

そして、これがあなたの参照のための私のjQueryです：

<script type="text/javascript">
$(document).ready(function() {

    $(function(){ 
        var token = window.location.toString().split("=")[1]; 

        $("#" + token).click(); 

        });​


    $('#interlocking').click(function() {
        $('#right-area').load('http://romanstonedesigns.com/new/services/interlocking.php', function() {
        });
    });

    $('#pool-backfill').click(function() {
        $('#right-area').load('http://romanstonedesigns.com/new/services/pool-backfill.php', function() {
        });
    });

    $('#poured-concrete').click(function() {
        $('#right-area').load('http://romanstonedesigns.com/new/services/poured-concrete.php', function() {
        });
    });

    $('#parging').click(function() {
        $('#right-area').load('http://romanstonedesigns.com/new/services/parging.php', function() {
        });
    });

    $('#custom-land').click(function() {
        $('#right-area').load('http://romanstonedesigns.com/new/services/custom-landscaping.php', function() {
        });
    });

    $('#excavation').click(function() {
        $('#right-area').load('http://romanstonedesigns.com/new/services/excavation.php', function() {
        });
    });

    $('#snow-rem').click(function() {
        $('#right-area').load('http://romanstonedesigns.com/new/services/snow-removal.php', function() {
        });
    });







});

</script>
4

1 に答える 1

0

わかりました。連動ページを表示したいので、フロントページは次のようになります。

1.1。

<ul>
        <li><a href="services.php?token=Interlocking">Interlocking</a></li>
    </ul>

2.サービスページでは、jqueryコードは次のようになります。

  <script type="text/javascript">


$(function(){ 




    $('#interlocking').click(function() {
    $('#right-area').load('http://romanstonedesigns.com/new/services/interlocking.php', function() {
    });
});

$('#pool-backfill').click(function() {
    $('#right-area').load('http://romanstonedesigns.com/new/services/pool-backfill.php', function() {
    });
});

$('#poured-concrete').click(function() {
    $('#right-area').load('http://romanstonedesigns.com/new/services/poured-concrete.php', function() {
    });
});

$('#parging').click(function() {
    $('#right-area').load('http://romanstonedesigns.com/new/services/parging.php', function() {
    });
});

$('#custom-land').click(function() {
    $('#right-area').load('http://romanstonedesigns.com/new/services/custom-landscaping.php', function() {
    });
});

$('#excavation').click(function() {
    $('#right-area').load('http://romanstonedesigns.com/new/services/excavation.php', function() {
    });
});

$('#snow-rem').click(function() {
    $('#right-area').load('http://romanstonedesigns.com/new/services/snow-removal.php', function() {
    });
});

    var token = window.location.toString().split("=")[1]; 
    $("#" + token).click(); 

    });

さよなら！

于 2012-04-08T01:46:21.690 に答える