Javascript JQUERY-选项卡-在日期筛选器中显示所有div内容

我在JSFIDLE上有一个工作的JQUERY选项卡部分

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

我怎样才能在sortALL已经显示的情况下加载它？我在下面附上了一张照片和代码。 这还需要CSS突出显示的选项卡处于活动状态，以使其与内容的颜色相同

谢谢你的帮助

JSFIDDLE：

图片：

代码：

CSS

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

排序这是关于排序的

排序B这都是关于排序B的

排序这个C这是关于排序C的

排序这是关于排序的

statealistings这是关于对statealistings进行排序的全部内容

将类添加到showAll页面加载中，并以编程方式触发其单击事件

您可以这样做：

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

$（“#showAll”）。单击（函数（）{
$（“.post”）.show（50）；
}).addClass（“突出显示”）。单击（）//很简单，谢谢。但是它是如何显示.sortALL数据过滤器的呢？这正是我想要的，我只是在努力学习。谢谢我理解.addClass，是不是.click（）？你的意思是@AlwaysLearning？看我的图片，第一张图片显示没有数据过滤器信息（排序此AAA）第二张图片显示所有数据过滤器（通过状态A列表排序AAA）是什么激活了数据过滤器jquery以显示所有（.post）div？
。单击（）
以编程方式触发元素的单击事件，就像单击show all一样，但区别在于它是通过代码而不是鼠标单击
<!--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>    

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