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

Making a text disappears when another text appears with jquery

本文关键字：文本 消失 另一个 jquery      更新时间：2023-09-26
$(document).ready(function () {
    $('.box').on('click', function() {
        var elmDay = $(this).data('day');
        $('.' + elmDay).toggleClass('display');
    });
});

请访问本网站了解 -> http://jsfiddle.net/g42d8pjp/

当您单击第一个框时，将显示

一个背景为红色的文本，对吗？，如果您单击另一个框，其他带有红色背景的文本也将显示。

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

为"day"等框添加一个公共类

<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');
    });
});

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

http://jsfiddle.net/ykoo873e/

您可以将这些div 的所有其他样式设置为"显示：无"，并且只设置一个：

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

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

http://jsfiddle.net/m5hL220d/

试试这个：

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');
});

}(;

相关文章：