jquery:点击load content only once and keep content

Question

一旦一个按钮被点击，它就会从不同的源加载内容。我如何阻止它再次重新加载内容，特别是当我单击其他按钮时？下面，我让按钮作为标签/切换。我有它，只要我点击一个按钮，它就会加载div中的内容。内容是一堆带有值的复选框，每个选项卡的值是不同的。目前我有一个地方，如果你点击按钮，它会显示内容，但当你点击另一个按钮来选中其他复选框时，它会删除之前选中的内容。想要能够点击按钮，检查我需要的，转到另一个按钮来显示内容，并返回到原始的如果需要to.So我如何才能只加载一次内容，以防止它再次上传和删除以前的内容？

按钮HTML

    <ul class="category">
        <li><a href="#web" class="category-btn web-btn">WEBSITE</a></li>
        <li><a href="#page" class="category-btn cama-btn">PAGES</a></li>
        <li><a href="#document" class="category-btn">DOCUMENTATION</a></li>
    </ul>

代码到容器，它将显示用户可以从中选择的产品的复选框。

    <div id="product_container" >
        <div class="website box" >
            <div class="tx-row" id='webin' >

            </div>
            <div class="tx-row"  id='webx' >

            </div>
        </div>
        <div class="page box" >
            <div class="tx-row" id='pagein' >

            </div>
            <div class="tx-row"  id='pagex' >

            </div>
        </div>
        <div class="document box" >
            <div class="tx-row" id='documentin' >

            </div>
            <div class="tx-row"  id='documentx' >

            </div>
        </div>
    </div>

在加载每个类别的复选框的内容时使用JQuery。

    $(document).ready(function(){   
        var $content = $('.box');
        function showContent(type) {
            $content.hide().filter('.' + type).show();
        }
        $('.category').one('click', '.web-btn', function(e) {
            $("#webin").load("/wp-content/themes/child/search-web.php");
            $("#webx"+").load("/wp-content/themes/child/search-notlikeweb.php");                                            
            showContent(e.currentTarget.hash.slice(1));
            e.preventDefault();
        }); 
        $('.category').on('click', '.page-btn', function(e) {
            $("#pagein").load("/wp-content/themes/child/search-page.php");
            $("#pagex").load("/wp-content/themes/child/search-notlikepage.php");                                            
            showContent(e.currentTarget.hash.slice(1));
            e.preventDefault();
        }); 
        $('.category').on('click', '.document-btn', function(e) {
            $("#documentin").load("/wp-content/themes/child/search-document.php");
            $("#documentx").load("/wp-content/themes/child/search-notlikedocument.php");                                            
            showContent(e.currentTarget.hash.slice(1));
            e.preventDefault();
        }); 
        $(".box").hide();
    });

Answer 1

我认为你不想在这里使用.load()。在HTML中只有3个不同的选项卡并切换它们可能会更好。

因此，您只需将内容加载到每个div一次。也许这会对你有所帮助：

​

$('.toggle').on('click', function(){
  var $target = $($(this).data('target'));
  $target.siblings().removeClass('active');
  $target.addClass('active');
});

.box {
  display: none;
}

.box.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product_container" >
        <div class="website box active" >
            <div class="tx-row" id='webin' >
              Content for website box
            </div>
            <div class="tx-row"  id='webx' >

            </div>
        </div>
        <div class="page box" >
            <div class="tx-row" id='pagein' >
              Content for page box
            </div>
            <div class="tx-row"  id='pagex' >

            </div>
        </div>
        <div class="document box" >
            <div class="tx-row" id='documentin' >
              Content for document box
            </div>
            <div class="tx-row"  id='documentx' >

            </div>
        </div>
    </div>
    
    <button class="toggle" data-target=".website.box">Toggle website</button>
    <button class="toggle" data-target=".page.box">Toggle page</button>
    <button class="toggle" data-target=".document.box">Toggle document</button>

​