时间戳

首页 > 解决方案 > 根据类隐藏点击或加载数据

javascript - 根据类隐藏点击或加载数据

问题描述

我的页面上有div标签。哪个像标签一样切换。

<div class="cntstdtl_01 {{ !strpos($_SERVER['REQUEST_URI'], 'page') ? 'active' : '' }}">
//data here if url don't contain word page
</div>

<div class="cntstdtl_02 {{ strpos($_SERVER['REQUEST_URI'], 'page') ? 'active' : '' }}">
//display if URL has page word 
</div>

//show if cntstdtl_02 has an active class, hide otherwise
<div class="page">
//show data
</div>

我试着这样做：

$('.page').hide();
$('#cntstdtl_01').on('click', function(){
$('.page').hide();
  });
$('#cntstdtl_02').on('click', function(){
  $('.page').show();
 });

我也试过这样做

  $('#cntstdtl_01').on('click', function(){
    if($('div.cntstdtl_01').hasClass('active')){

    $('.page').hide();
   }
 });//this isn't working

但是我对此的问题是，如果我必须先单击切换才能生效。我想要的是如果cntstdtl_02在页面加载或单击时活动类枯萎，则自动显示 div。任何建议表示赞赏。

标签： javascriptphpcss

解决方案

此答案假定您的 HTML 实际上与您的问题中显示的确切顺序完全相同。这是一个纯 CSS 的解决方案，我相信如果可能的话，它比 Javascript/jQuery 解决方案更受欢迎。

div.page {
  display: none;
}

div.cntstdtl_02.active + div.page {
  display: block;
}

您默认“页面” div 不显示。然后，如果有一个具有“cntstdtl_02”和“active”类的div，其下一个元素是“page”div，我们将显示“page”div。

演示。当前显示“页面” div，因为存在“活动”类。删除“活动”类，运行小提琴，你会看到“页面”的 div 消失了。

div.page {
  display: none;
}

div.cntstdtl_02.active + div.page {
  display: block;
}
<div class="cntstdtl_01 active">
data here if url don't contain word page
</div>

<div class="cntstdtl_02 active">
display if URL has page word 
</div>

<!-- show if cntstdtl_02 has an active class, hide otherwise -->
<div class="page">
show data
</div>

推荐阅读