How to apply filter when page load?

Question

Filters have this code:

<li style="float:left; width:70px; padding-left: 10px;"><a href="#none" data-filter=".film"><img src="img/study.png" width="70"></a></li>
<li style="float:left; width:70px; padding-left: 10px;"><a href="#none" data-filter=".music"><img src="img/study.png" width="70"></a></li>
<li style="float:left; width:70px; padding-left: 10px;"><a href="#none" data-filter=".art"><img src="img/study.png" width="70"></a></li>

I want to create an autoload for a filter when starting the page. The main in the filter is:

data-filter=".music"

But I dont know automatically call this filter when starting the page. How do I do that?

Answer 1

You can do it on $(document).ready() .

$(document).ready(
    function () {
        $('[data-filter=".music"]').click()
    }
);

Fiddle: http://jsfiddle.net/Lsrvd9et/

[data-filter=".music"] is a selector that selects an element based on an attribute value. And document.ready is an event that runs when the page is ready for JavaScript code to execute.