Using php to display content in jquery tabs

问题

I have a page with a few jquery tabs, each of which I want to display the result of a php function, as follows:

<ul  id="tabs" class="ccm-dialog-tabs">
    <li class="ccm-nav-active"><a href="javascript:void(0);" id="tabs-1">Tab 1 Title  </a></li>
    <li><a href="javascript:void(0);" id="tabs-2">Tab 2 Title></a></li>                  
</ul>

<div id="tabs-1-tab">
    <?php  echo "This is tab 1<br>"; ?>
</div>

<div id="tabs-2-tab">
    <?php  echo "This is tab 2<br>"; ?>
</div>

The jquery to make the tabs work is:

<script type="text/javascript" language="javascript">
    var ccm_activeTransactionsTab = "tabs-1";
    $("#transaction_tabs a").click(function() {
        $("li.ccm-nav-active").removeClass('ccm-nav-active');
        $("#" + ccm_activeTransactionsTab + "-tab").hide();
        ccm_activeTransactionsTab = $(this).attr('id');
        $(this).parent().addClass("ccm-nav-active");
        $("#" + ccm_activeTransactionsTab + "-tab").show();
  });
</script>

The problem I am having is that when the page loads, the active tab shows the result of both php statements - i.e. it shows:

echo "This is tab 1<br>;
echo "This is tab 2<br>;

If I click between the tabs a few times then the extra information disappears. These tabs work fine normally, the problem only arises when they show the output of a php function.

回答1:

I would suggest you use hide then at start using simple CSS

<div id="tabs-1-tab" style='display:none'>
    <?php  echo "This is tab 1<br>"; ?>
</div>

<div id="tabs-2-tab"  style='display:none'>
    <?php  echo "This is tab 2<br>";?>
</div>

Also you have missed closing quotes in statement <?php echo "This is tab 1<br>; ?>

回答2:

You missed the qoute on echo "This is tab 1<br>; but echo "This is tab 1<br>";

来源：https://stackoverflow.com/questions/21503521/using-php-to-display-content-in-jquery-tabs

标签

javascript

php

jquery

tabs