Question

为以下HTML代码的选定列设置样式的最佳方法是什么

    <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 -->

我上面有4列，当用户选择（点击）其中一列时，我想用一些样式突出显示

Answer 1

试试这个

添加main-menu课程和active课程

<强> JQUERY

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

<强> CSS

.active{
    background-color:green;
  }

DEMO

为所选（单击）项目设置样式的最佳方法是什么

1 个答案: