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是否具有活动类，然后删除{{1} }类。

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”和“活动”类的div，其下一个元素是“ page” div，则显示“ page” div。

DEMO。当前显示“页面” 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')
    }
});

根据类别隐藏单击或加载时的数据

4 个答案: