单击链接时如何显示div

时间：2022-11-28 21:10:10

I have a link with class yes and I want to show a div with classname (box) when the link is clicked. I wrote the below code but it does not work and display nothing when clicked . here is my snippet :

我有一个类yes的链接，我想在点击链接时显示带有classname（box）的div。我编写了下面的代码，但它不起作用，点击时不显示任何内容。这是我的片段：

$('.yes').on('click', function(e){  e.preventDefault();  $(this).siblings('.box').toggleClass('active');})
.box {
  display: none;
  line-height: 100px;
  background: #ccc;
  border: 1px solid #444;
  text-align: center;
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
  -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.box.active {
  display: block;
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.box.active.good {
  -webkit-animation: anim .3s ease-in-out;
          animation: anim .3s ease-in-out;
}

@-webkit-keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
</head>
<body>          
<ul>
<li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>
</body>
</html>

Thanks

谢谢

7 个解决方案

#1

1  

Why don't you use directly class selector $('.box'), if you've only one box.

如果你只有一个盒子，为什么不直接使用类选择器$（'。box'）。

$('.box').toggleClass('active');

If you've multiple .box after each ul, use .parents()

如果你在每个ul之后有多个.box，请使用.parents（）

$(this).parents('ul').next().toggleClass('active');


$('.yes').on('click', function(e){  
  e.preventDefault(); 
  $('.box').toggleClass('active');
  //$(this).parents('ul').next().toggleClass('active');
})
.box {
  display: none;
  line-height: 100px;
  background: #ccc;
  border: 1px solid #444;
  text-align: center;
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
  -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.box.active {
  display: block;
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.box.active.good {
  -webkit-animation: anim .3s ease-in-out;
          animation: anim .3s ease-in-out;
}

@-webkit-keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
</head>
<body>          
<ul>
<li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>
</body>
</html>

#2

0  

try this:

尝试这个：

$('.yes').on('click', function(e){  
e.preventDefault(); 
$(this).parents("ul").siblings('.box').toggleClass('active');
return false;
})

the return false says that the link should not work but the code in the onclick will work.

返回false表示链接不起作用，但onclick中的代码将起作用。

#3

0  

This is because in your html the class 'yes' has no sibling.

这是因为在你的html中，'yes'这个类没有兄弟姐妹。

Use this to directly show 'box' class

用它来直接显示'box'类

$('.yes').on('click', function(e){  
   e.preventDefault(); 
   $('.box').toggleClass('active');
 });

#4

0  

You are traversing in wrong way. Please make it as right like be

你走错了路。请像对待一样正确

$('.yes').on('click', function(e){  e.preventDefault();  $(this).closest('ul').next('.box').toggleClass('active');})
.box {
  display: none;
  line-height: 100px;
  background: #ccc;
  border: 1px solid #444;
  text-align: center;
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
  -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.box.active {
  display: block;
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.box.active.good {
  -webkit-animation: anim .3s ease-in-out;
          animation: anim .3s ease-in-out;
}

@-webkit-keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
</head>
<body>          
<ul>
<li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>
</body>
</html>

#5

0  

It is because your <a href="#tab-1" class="yes"> element has no siblings. $(this).siblings is returning nothing.

这是因为您的元素没有兄弟姐妹。 $（this）.siblings什么都没有回来。

To fix this, you could use this alternative javascript:

$('.yes').on('click', function(event) {
  event.preventDefault();
  $(this).parents("ul").siblings('.box').toggleClass('active');
});

Expand the code snippet for a demonstration:

展开演示的代码段：

$('.yes').on('click', function(event) {
  event.preventDefault();
  $(this).parents("ul").siblings('.box').toggleClass('active');
});
.box {
  display: none;
  line-height: 100px;
  background: #ccc;
  border: 1px solid #444;
  text-align: center;
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
  -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.box.active {
  display: block;
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.box.active.good {
  -webkit-animation: anim .3s ease-in-out;
          animation: anim .3s ease-in-out;
}

@-webkit-keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
</head>
<body>          
<ul>
<li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>
</body>
</html>

But basically, your anchor tag and your box are not siblings, this can be shown by indentation:

但基本上，你的锚标签和你的盒子不是兄弟姐妹，这可以通过缩进显示：

<ul>
  <li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>

Siblings need to be at the same level. Maybe this diagram will help you better understand what siblings are:

兄弟姐妹需要处于同一水平。也许这个图表可以帮助您更好地理解兄弟姐妹是什么：

单击链接时如何显示div

#6

0  

Its not direct sibling to your anchor tag. It's sibling to "ul"

它不是你的锚标签的直接兄弟。这是“ul”的兄弟姐妹

$('.yes').on('click', function(e){  e.preventDefault();  $(this).parents("ul").siblings('.box').toggleClass('active');})
.box {
  display: none;
  line-height: 100px;
  background: #ccc;
  border: 1px solid #444;
  text-align: center;
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
  -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.box.active {
  display: block;
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.box.active.good {
  -webkit-animation: anim .3s ease-in-out;
          animation: anim .3s ease-in-out;
}

@-webkit-keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
</head>
<body>          
<ul>
<li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>
</body>
</html>

#7

0  

$('.yes').on('click', function(e){e.preventDefault();  $(this).parents().siblings('.box').toggleClass('active');})
.box {
  display: none;
  line-height: 100px;
  background: #ccc;
  border: 1px solid #444;
  text-align: center;
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
  -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.box.active {
  display: block;
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.box.active.good {
  -webkit-animation: anim .3s ease-in-out;
          animation: anim .3s ease-in-out;
}

@-webkit-keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
</head>
<body>          
<ul>
<li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>
</body>
</html>

#1

1  

Why don't you use directly class selector $('.box'), if you've only one box.

如果你只有一个盒子，为什么不直接使用类选择器$（'。box'）。

$('.box').toggleClass('active');

If you've multiple .box after each ul, use .parents()

如果你在每个ul之后有多个.box，请使用.parents（）

$(this).parents('ul').next().toggleClass('active');


$('.yes').on('click', function(e){  
  e.preventDefault(); 
  $('.box').toggleClass('active');
  //$(this).parents('ul').next().toggleClass('active');
})
.box {
  display: none;
  line-height: 100px;
  background: #ccc;
  border: 1px solid #444;
  text-align: center;
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
  -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.box.active {
  display: block;
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.box.active.good {
  -webkit-animation: anim .3s ease-in-out;
          animation: anim .3s ease-in-out;
}

@-webkit-keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
</head>
<body>          
<ul>
<li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>
</body>
</html>

#2

0  

try this:

尝试这个：

$('.yes').on('click', function(e){  
e.preventDefault(); 
$(this).parents("ul").siblings('.box').toggleClass('active');
return false;
})

the return false says that the link should not work but the code in the onclick will work.

返回false表示链接不起作用，但onclick中的代码将起作用。

#3

0  

This is because in your html the class 'yes' has no sibling.

这是因为在你的html中，'yes'这个类没有兄弟姐妹。

Use this to directly show 'box' class

用它来直接显示'box'类

$('.yes').on('click', function(e){  
   e.preventDefault(); 
   $('.box').toggleClass('active');
 });

#4

0  

You are traversing in wrong way. Please make it as right like be

你走错了路。请像对待一样正确

$('.yes').on('click', function(e){  e.preventDefault();  $(this).closest('ul').next('.box').toggleClass('active');})
.box {
  display: none;
  line-height: 100px;
  background: #ccc;
  border: 1px solid #444;
  text-align: center;
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
  -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.box.active {
  display: block;
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.box.active.good {
  -webkit-animation: anim .3s ease-in-out;
          animation: anim .3s ease-in-out;
}

@-webkit-keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
</head>
<body>          
<ul>
<li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>
</body>
</html>

#5

0  

It is because your <a href="#tab-1" class="yes"> element has no siblings. $(this).siblings is returning nothing.

这是因为您的元素没有兄弟姐妹。 $（this）.siblings什么都没有回来。

To fix this, you could use this alternative javascript:

$('.yes').on('click', function(event) {
  event.preventDefault();
  $(this).parents("ul").siblings('.box').toggleClass('active');
});

Expand the code snippet for a demonstration:

展开演示的代码段：

$('.yes').on('click', function(event) {
  event.preventDefault();
  $(this).parents("ul").siblings('.box').toggleClass('active');
});
.box {
  display: none;
  line-height: 100px;
  background: #ccc;
  border: 1px solid #444;
  text-align: center;
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
  -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.box.active {
  display: block;
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.box.active.good {
  -webkit-animation: anim .3s ease-in-out;
          animation: anim .3s ease-in-out;
}

@-webkit-keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
</head>
<body>          
<ul>
<li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>
</body>
</html>

But basically, your anchor tag and your box are not siblings, this can be shown by indentation:

但基本上，你的锚标签和你的盒子不是兄弟姐妹，这可以通过缩进显示：

<ul>
  <li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>

Siblings need to be at the same level. Maybe this diagram will help you better understand what siblings are:

兄弟姐妹需要处于同一水平。也许这个图表可以帮助您更好地理解兄弟姐妹是什么：

单击链接时如何显示div

#6

0  

Its not direct sibling to your anchor tag. It's sibling to "ul"

它不是你的锚标签的直接兄弟。这是“ul”的兄弟姐妹

$('.yes').on('click', function(e){  e.preventDefault();  $(this).parents("ul").siblings('.box').toggleClass('active');})
.box {
  display: none;
  line-height: 100px;
  background: #ccc;
  border: 1px solid #444;
  text-align: center;
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
  -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.box.active {
  display: block;
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.box.active.good {
  -webkit-animation: anim .3s ease-in-out;
          animation: anim .3s ease-in-out;
}

@-webkit-keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
</head>
<body>          
<ul>
<li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>
</body>
</html>

#7

0  

$('.yes').on('click', function(e){e.preventDefault();  $(this).parents().siblings('.box').toggleClass('active');})
.box {
  display: none;
  line-height: 100px;
  background: #ccc;
  border: 1px solid #444;
  text-align: center;
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
  -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.box.active {
  display: block;
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.box.active.good {
  -webkit-animation: anim .3s ease-in-out;
          animation: anim .3s ease-in-out;
}

@-webkit-keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
</head>
<body>          
<ul>
<li><a href="#tab-1" class="yes">Show Box</a></li>
</ul>
<div class="box good" style="width:200px; height:200px;border:1px solid red;"></div>
</body>
</html>

标签：

相关文章