如果没有类名，则隐藏 div答案

【问题标题】：Hide div if it doesn't have class name如果没有类名，则隐藏 div
【发布时间】：2016-12-12 03:41:42
【问题描述】：

我正在尝试创建一个带有不同标签的作品集，例如 code 和 design - 然后我希望在顶部有一个导航，当您点击单词 code 时 -它将隐藏所有 div，除了具有类名代码的那些。设计反之亦然。

我已经看到了一些使用 .not jQuery 函数的示例，但我无法使用它

<a id="code-btn" href="#"> Show Code </a>
<a id="design-btn" href="#"> Show Design </a>

<div class="box d">test</div>
<div class="box c">test</div>
<div class="box d">test</div>

<script>
    $("#code-btn").click(function() {
        $('div').not('.' + c).hide();
    });
</script>

我不想使用切换，因为我以后可能会添加更多标签，例如徽标等。

【问题讨论】：

'.c' 而不是'.' + c，因为您没有任何变量c。我会建议$('div.box:not(.c)')
你为什么要倒着做？只需隐藏ds：$('.d').hide();
$('.d').hide(); 不工作吗？
OP 可能有其他类，只需要显示特定类的 div。所以使用 not 将是最好的选择，而不是一个一个地隐藏所有
@Tushar 我用 $("#code-btn").click(function() { $('div.box').not('.c').hide( ) });谢谢！！！

标签： javascript jquery html css jquery-ui

【解决方案1】：

删除与类的连接...

检查一下...这可能会有所帮助...

$("#code-btn").click(function() {
        $('div').not('.c').hide();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="code-btn" href="#"> Show Code </a>
<a id="design-btn" href="#"> Show Design </a>

<div class="box d">test d</div>
<div class="box c">test c</div>
<div class="box a">test a</div>

【讨论】：

【解决方案2】：

试试吧。像这样： $("div").filter(":not('.c')").hide();

【讨论】：

.c 需要用双引号括起来。
现在，.c 需要用单引号括起来。
在 :not() 选择器中不需要引号。 w3schools.com/jquery/sel_not.asp
W3Schools 应该持保留态度。 :not(.a .b) 如何解决？

【解决方案3】：

这里 - 只用 CSS 完成，根本不需要 JS。

.button {
  margin: 0 2em;
  }

div {
  display: none;
  }
div:target {
  display: block;
  }

<a class="button" id="code-btn" href="#code"> Show Code </a>
<a class="button" id="design-btn" href="#design"> Show Design </a>

<div id="code">Code</div>
<div id="design">Design</div>

【讨论】：

警告：单个容器和固定订单（如不能有box c + box d + box c）
没错，但在这种特殊情况下，您为什么要这样做？

【解决方案4】：

我的版本对两者都使用一个事件处理程序

       $("a").click(function (evt) {
                var showCode = this.id == "code-btn";
                $("div.c").toggle(showCode);
                $("div.d").toggle(!showCode);
            }
                )
        });

【讨论】：

【解决方案5】：

我认为这是你需要的，请检查下面的 sn-p

$(function(){
$('#code-btn').on('click', function(){
	if($('.box').hasClass('c')){
		$('.c').css('display','block');	
		$('.d').css('display','none');
	}
});
$('#design-btn').on('click', function(){
	if($('.box').hasClass('d')){
		$('.d').css('display','block');	
		$('.c').css('display','none');
	}
});
});

.box {
	display:none;
}

<a id="code-btn" href="#"> Show Code </a>
<a id="design-btn" href="#"> Show Design </a>

<div class="box d">design</div>
<div class="box c">code</div>
<div class="box d">design</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

【讨论】：