Question

我正在尝试创建一个包含 code ＆amp; 设计 - 然后我想在顶部导航，当你点击字代码时 - 它会隐藏所有div，除了那些带有类名代码的div。反之亦然。

我已经看过一些使用.not jQuery函数的例子，但是我无法使用它。

isCoolNumber

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

Answer 1

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

Answer 2

这里 - 只用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>

Answer 3

删除课堂上的Concatination

结帐这......这可能会有所帮助......

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

我的版本，它为

使用一个事件处理程序

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

Answer 5

我认为这就是您所需要的，请查看以下代码段

$(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>

如果div没有类名，请隐藏div

5 个答案: