Question

单击按钮后，它会从差异源加载内容。如何阻止它再次重新加载内容，尤其是当我点击其他按钮时？下面，我有按钮作为选项卡/切换。我有它，一旦我点击一个按钮，它加载div中的内容。内容是一组带有值的复选框，每个选项卡的值都不同。目前我有它，如果你点击按钮，它会带来内容，但是当你点击另一个按钮检查其他复选框时，它会删除之前检查的内容。希望能够点击按钮，检查我需要的内容，转到另一个按钮显示内容，如果需要则返回到原始内容。所以我如何只加载内容一次以防止再次上传和删除以前的内容？

按钮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。也许这会对你有所帮助：

＆＃13;

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

＆＃13;

.box {
  display: none;
}

.box.active {
  display: block;
}

＆＃13;

<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>

＆＃13;

jquery：点击加载内容一次并保留内容

1 个答案: