ajax - 更新せずに同じページの右側の div に表示されるメニュー項目のコンテンツをクリックしますか?

Question

私は、jqueryメニューに合わせてleftmenuを持っているphpテンプレートを持っています。このメニューにはメニュー項目がありました。メニュー項目をクリックすると、このメニュー項目に関連するページが更新されずにページの右側の div に読み込まれます。ページのスクリーンショットを提供しています。

この点で誰でも私を助けることができますか、

事前にありがとうラムサイ

これが左のmenu.phpのコードです

<div  id="leftmenu">
  <div class="urbangreymenu">
    <h3 class="headerbar"><a href="#">BREAST</a></h3>
     <ul class="submenu">
      **<li><a href="breast.php">Breast/a></li>**
      </ul>
    <h3 class="headerbar"><a href="#">CVS</a></h3>

    <ul class="submenu">
      <li><a href="#">CHEST PAIN</a></li>
      <li><a href="#">CHEST PAIN MASTER</a></li>
      <li><a href="#">DIZZINESS-VERTIGO-LOC</a></li>
      <li><a href="#">LOCAL-LEG-GENERALISED SWELLING</a></li>
      <li><a href="#">SHORT OF BREATH(+PND)</a></li>
    </ul>

    <h3 class="headerbar"><a href="#">ENT</a></h3>
    <ul class="submenu">
      <li><a href="#">EAR</a></li>
      <li><a href="#">NOSE</a></li>
      <li><a href="#">THROAT</a></li>
    </ul>

    <h3 class="headerbar"><a href="#">GENERAL</a></h3>
    <ul class="submenu">
      <li><a href="#">FATIGUE-MALAISE</a></li>
      <li><a href="#">FEVER</a></li>
      <li><a href="#">SKIN RASH & PRURITIS</a></li>
    </ul>

    <h3 class="headerbar"><a href="#">GIT</a></h3>
    <ul class="submenu">
      <li><a href="#">ABDOMINAL DISTENTION</a></li>
      <li><a href="#">ABDOMINAL PAIN</a></li>
      <li><a href="#">BLACK STOOLS</a></li>
      <li><a href="#">CONSTIPATION</a></li>
      <li><a href="#">DIARRHEA</a></li>
      <li><a href="#">NAUSEA-VOMITING</a></li>
    </ul>

    <h3 class="headerbar"><a href="#">NEUROLOGY</a></h3>
    <ul class="submenu">
      <li><a href="#">APHASIA & SLURRED SPEECH</a></li>
      <li><a href="#">BALANCE-TREMORS-PARALYSIS</a></li>
      <li><a href="#">HEADACHE</a></li>
      <li><a href="#">SEIZURES-MEMORY LOSS-CONFUSION</a></li>
      <li><a href="#">TINGLING-NUMBNESS</a></li>
    </ul>

     <h3 class="headerbar"><a href="#">PULMONARY</a></h3>
     <ul class="submenu">
      <li><a href="#">COUGH</a></li>
     </ul>
  </div>
</div>

そして、ここに私の読み込みコードがあります:

<div id ="content">
<script>
$.get('breast.php', function(data) {
$('.content').html(data);
});
</script>

</div>

メニュー項目をクリックすると、関連するページがその div に表示されます

前もってありがとう、ラムサイ

Answer 1

                    $(document).ready(function () {
                        $('#leftmenu').find('a[href*=".php"]').live('click', function (e) {
                            e.preventDefault();

                            $.get($(this).attr('href'), function (data) {
                                $('.content').html(data);
                            });
                        });
        //Or

                    $('#leftmenu').find('a[href*=".php"][class*="MyWebLink"]').live('click', function (e) {
                        e.preventDefault();
if(!$(this).hasClass('Alreadyloaded')){

                        var Url = $(this).attr('href');

                        $.ajax({
                            url: Url, type: 'Get', dataType: 'json',
                            //data: { value: $(this).data('value') },
                            success: function (data) {
                                $('.content').append(data);
    //Or
                                $('.content').prepend(data);

                                $(this).addClass('Alreadyloaded');
                            }
                        });
}
                    });
                    });

Answer 2

どうしたの？docs.jquery.com/Ajaxを使用する