JQUERY - Tabs - 显示日期过滤器中的所有div内容

Question

我在jsfiddle上有一个工作的JQUERY Tab部分。

当页面加载时，我希望显示.sortALL。

如何使用已经显示的sortALL加载它？我在下面附上了照片和代码。 这还需要选项卡CSS高亮显示为活动，以使其与内容颜色相同。

感谢您的帮助。

的jsfiddle：

http://jsfiddle.net/k5g6wcw3/

IMAGE：

CODE：

CSS

*{margin:0;padding:0;float:left;width:100%;}
#tabs{width:80%;margin:2% 10%;background:#efefef;min-height:250px;}
a{cursor:pointer;display:block;width:20%;background:#ddd;text-align:center;padding:2% 0;text-decoration:none;color:#000;}
a:hover{background:#ccc;color:#000;}
.post{padding:2%;width:96%;}
.highlight {background: #efefef;}

JQUERY

// Variable
var posts = $('.post');
posts.hide();


// Click function
$( ".sort" ).click(function() { 
    // Get data of category
    var customType = $( this ).data('filter'); // category
    console.log(customType);
    console.log(posts.length); // Length of articles

    posts
        .hide()
        .filter(function () {
        return $(this).data('cat') === customType;
        })
        .show(50);
});

// All
$( "#showAll" ).click(function() {
  $( ".post" ).show(50);
});


// color toggle
$( ".sort" ).click(function() {
  $( this ).toggleClass( "highlight" ).siblings().removeClass("highlight");
});

HTML

<!--sort links-->
<div id="tabs">
<a href="#" class="sort" id="showAll" >Show All</a>
<a href="#" class="sort" data-filter=".sortA" >Sort A</a>
<a href="#" class="sort" data-filter=".sortB" >Sort B</a>
<a href="#" class="sort" data-filter=".sortC" >Sort C</a>
<a href="#" class="sort" data-filter=".StateA">State A</a>


<!--A-->
<div data-cat=".sortA" class="post"><h2>Sort this A A A</h2><p>This is all about sort A</p></div>
<!--B-->
<div data-cat=".sortB" class="post"><h2>Sort this B</h2><p>This is all about sort B</p></div>
<!--C-->
<div data-cat=".sortC" class="post"><h2>Sort this C</h2><p>This is all about sort C</p></div>
<!--A-->
<div data-cat=".sortA" class="post"><h2>Sort this A A A</h2><p>This is all about sort A</p></div>
<!--Hopewell-->
<div data-cat=".StateA" class="post"><h2>State A Listings</h2><p>This is all about sorting State A listings</p></div>

</div>    

Answer 1

在页面加载时在 showAll 上添加课程并以计划方式触发其点击事件。

你可以这样做：

$( "#showAll" ).click(function() {
  $( ".post" ).show(50);
}).addClass("highlight").click();  //<------------- note this .click()

现在它将首次显示第一次加载页面时的所有内容。

更新的FIDDLE：

http://jsfiddle.net/k5g6wcw3/1/