Question

$(document).ready(function () {
    $('.box').on('click', function() {
        var elmDay = $(this).data('day');
        $('.' + elmDay).toggleClass('display');
    });
});

请访问此网站以了解 - ＆gt; http://jsfiddle.net/g42d8pjp/

当您在第一个框中单击时，一个带有背景红色的文本将显示，对吗？如果您在另一个框中单击，则会显示其他带有红色背景的文本。

如果单击第二个框，我可以使第一个带红色背景的文本消失吗？

Answer 1

为什么不通过javascript / jquery更改css？这是一个快速完成的更新jsfiddle：

http://jsfiddle.net/ykoo873e/

您可以将这些div的所有其他样式设置为＆quot; display：none＆＃39;并且只设置一个：

$('.display').css('display', 'none');
$('.display.' + elmDay).css('display', 'block');

虽然您也可以像这样动态更改div中的html：

http://jsfiddle.net/m5hL220d/

Answer 2

为＆＃39; day＆＃39;

等框添加一个公共类

<div class="row">
   <div data-day="thursday" class="box thursday-box col-xs-6 col-sm-3">
      <img src="http://pubcrawlnovo-black.site44.com/assets/images/box.png">
   </div>
   <div data-day="friday" class="box friday-box col-xs-6 col-sm-3">
      <img src="http://pubcrawlnovo-black.site44.com/assets/images/box.png">
   </div>
   <div class="col-9">
   </div>
</div>
<div class="thursday display day">
   <h1 class="title">SOMETHING1 </h1>
   <p>SOMETHING1</p>
</div>
<div class="friday display day">
   <h1 class="title">SOMETHING2</h1>
   <p>SOMETHING2</p>
</div>

点击附加此类附加的元素。

$(document).ready(function () {
    var days = $('.day');
    $('.box').on('click', function() {
        var elmDay = $(this).data('day');
        days.addClass('display');
        $('.' + elmDay).toggleClass('display');
    });
});

Answer 3

试试这个：

http://jsfiddle.net/g42d8pjp/1/

 <div id="thursday" class="thursday display">
            <h1 class="title">SOMETHING1 </h1>
            <p>SOMETHING1</p>
        </div>




        <div id="friday" class="friday display">
            <h1 class="title">SOMETHING2</h1>
            <p>SOMETHING2</p>
        </div>

$(document).ready(function () {
$('.box').on('click', function() {
    var elmDay = $(this).data('day');
    if (elmDay == 'thursday')
    {
        $('#thursday').show();
        $('#friday').hide();

    }else
    {
        $('#friday').show();
        $('#thursday').hide();
    }

    //$('.' + elmDay).toggleClass('display');
});

}）;

当另一个文本与jquery一起出现时，使文本消失

3 个答案: