WebApp making simple filter bars, ascending descending style

This section is often seen when a list of filters is displayed

As shown below

The HTML section is simple

<Divclass= "Filter">        <ul>            <binclass= "Current">                <ahref= "javascript:;">Default</a>            </Li>            <Liclass="">                <ahref= "javascript:;">Number</a>            </Li>            <binclass= "Arrow">                <ahref= "javascript:;">Price</a>            </Li>            <binclass="">                <ahref= "javascript:;">Time</a>            </Li>        </ul>    </Div>

Then use CSS to beautify the Curent class to represent the state of the currently selected style, where the arrow behind the price can be added with a pseudo-class

. Filter ul Li{float: Left;width:25%;Border-bottom:1px solid #ddd;Border-right:1px solid #ddd;Background-color:#fff;}. Filter UL li.current{Border-bottom:2px solid #D24D56;Margin-top:-1px;}. Filter ul Li a{Display:Inline-block;width:100%;Height:100%;text-align:Center;Line-height:40px;position:relative;}. Filter ul Li.arrow A:after{position:Absolute;Top:19px; Right:10px;content:"';width:9px;Height:5px;Background-image:URL (img/arrow.png);-webkit-transition:All 0.8s ease-in-out;}. Filter ul Li.arrow A.current:after{-webkit-transform:Rotate (180deg);}

The next thing to do is to use jquery to achieve

First consider changing the style of the selected Li with jquery

$ ('. Filter ul li '). Click (function() {            $ (this). addclass (' current '). Siblings (). Removeclass (' current ');        });

Then implement the arrow rotation in the "Price" section

This is done by adding the current class to the a element in the special class arrow or removing the current class to achieve the rotation of the arrows

$ ('. Filter ul Li.arrow '). Toggle (function() {            $ (this). AddClass (' current');            $ (this). Children (' a '). Removeclass (' current ');         function () {            $ (this). AddClass (' current');            $ (this). Children (' a '). addclass (' current ');        });

Finally achieve the desired effect!

If you have other methods of implementation, please leave me a message!

Good good study, day up!

WebApp making simple filter bars, ascending descending style