jQuery and AJAX Tutorials 35 | AJAX Highlighting Active Categories Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

hey what's up guys my name is Elias and
welcome to your hold on
35 yeah to the fifth tutorial so in the
previous tutorial we did a good job
programming this future so I can already
click on architecture and I only have
pictures related to the topic
architecture on the screen and CT and
nature and stuff so and you know it took
only a few number of lines of code in
jQuery which is actually a very powerful
thing so but now what do you want to
have we want to have something over here
like all or something so that we just go
back to the previous state where we have
all the pictures listed on the screen
and we also want to give the user a
feedback to highlight the current the
current category for instance so it's
something that we are going to do and
first I want to style this list because
I don't like the way it appears on the
screen and I want the screen to be
styled horizontally because now it's a
vertical and I don't like the way and
the like this boots as well so let's
just go ahead to our style CSS document
and add a new row for the filter so
filter I'll give you some more space and
filter that fighter filter Li and let's
say display:inline and now this should
be display inline and the boots yes they
got so this looks better to my mind
because I know I don't know I just like
more so and we also want to have and you
for the current stage for for the active
category which we can go like filter Li
active because we will
set a class of active to the current
category so let's just go ahead back to
the filter to the JavaScript and every
time we fetch a category we want this
element to get active right now so just
go ahead and say this and if you don't
remember what this means this is the
current element which is clicked this
set class
I hope it's set glass not a plastic
glass category
I think it's add class but okay let's
see let's just say add class at last
category and now we can test if it gets
a class of category I'll just go to the
developer tools and I click this thing
yes and it has it gets the class of
nature oh I'm sorry I applied the class
of category but I should have applied
the class of active yep like this so I
now we can highlight the class the
active class or already and it gets the
class of active so we created a CSS rule
for active and let's just go ahead and
change its font no text decoration to
underlined so I'll just go ahead and
test it and so let's see what's gonna
happen
I click nature and it's kind of
highlighted by this outer line but there
is also a problem at the same time when
I click nature on a click City or
architecture all this elements get the
class active so we have three elements
of active and only one element can be
active so that means that we have to get
rid of the class active at all elements
before we continue so let's just go
ahead and get this filter
and let's perform this operation perform
this function remove class to all the
list elements before we add class active
remove class active so now I remove
class active and then I apply the class
act active only to the current element
and now we can go ahead and test it so I
click match nature and it's only nature
active and I click city and the nature
loses its class active in our
architecture so this is the way we can
switch between the categories so there
was one more feature and there are also
going to be some more cool features and
stuff and so this is for a tutorial
because time is up I'll see you guys the
next one and I hope you guys like this
tutorial and you'll learn lots of cool
stuff so I'll see you guys