在单击或负载上隐藏数据，具体取决于课程

Question

我的页面上有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。任何建议都将受到赞赏。

Answer 1

在您的CSS文件中您可以创建一个助手类.hide{ display: none }，然后将此类添加到您的<div class="page hide"></div>，并且使用JQuery检查cntstdtl_02是否具有活动类，然后删除hide类。

if ($('.cntstdtl_02').hasClass('active')) {
   $('.page').removeClass('hide')
}

Answer 2

感谢所有输入，我已经这样做了：

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

Answer 3

此答案假设您的HTML实际上处于问题中所示的确切顺序。这是一个仅CSS的解决方案，我认为在可能的情况下，它比JavaScript/jQuery解决方案更喜欢。

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

您正在默认"页面"div以不显示。然后，如果有一个带有" CNTSTDTL_02"one_answers" Active"的DIV，其下一个元素是"页面" DIV，我们将显示"页面" 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>

Answer 4

尝试添加文档就绪功能。无需单击，文档准备就绪后运行。

$( document ).ready(function() {
    if ($('.cntstdtl_02').hasClass('active')) {
       $('.page').removeClass('hide')
    }
});