What is the best way to style the selected(clicked) item

Question

What is the best way to style the selected column of the following HTML code

    <div class="row">
        <div class="col-md-3 portfolio-item starter">
            <a href="#/starter">
                <img class="img-responsive" src="images/starter.jpg" alt="starter">
            </a>
             <h2><a href="#/starter">Starter</a></h2>
        </div>
        <div class="col-md-3 portfolio-item">
            <a href="#/salads">
                <img class="img-responsive" src="images/salads.jpg" alt="salads">
            </a>
             <h2><a href="#/salads">Salads</a></h2>
        </div>
        <div class="col-md-3 portfolio-item">
            <a href="#/main">
                <img class="img-responsive" src="images/main.jpg" alt="main">
            </a>
             <h2><a href="#/main">Main</a></h2>
        </div>
        <div class="col-md-3 portfolio-item">
            <a href="#/dessert">
                <img class="img-responsive" src="images/desserts.jpg" alt="desserts">
            </a>
             <h2><a href="#/dessert">Desserts</a></h2>
        </div>
    </div>
    <!-- /.row -->

I have 4 columns as above, when user selects(clicks) one of the column, i want to highlight it with some style

Arun Kumar · Accepted Answer · 2015-08-18 09:00:45Z

2

Try this

Add main-menu class and active class

JQUERY

$('.main-menu div').on('click',function(){
  $('div').removeClass('active');
  $(this).addClass('active');
});

CSS

.active{
    background-color:green;
  }

DEMO

answered Aug 18, 2015 at 9:00

Arun Kumar

1,6331 gold badge18 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

What is the best way to style the selected(clicked) item

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related