使用 jquery 显示/隐藏

发布于 2024-10-07 12:17:20 字数 1381 浏览 0 评论 0原文

我无法隐藏和显示 p 标签。有人可以帮我处理这段代码吗？我是什么试图完成的是，当您单击隐藏按钮时，内容将被隐藏。然后，当您准备好显示内容时，单击“显示”按钮。我知道你可以使用切换开关，但我不想这样做

<!DOCTYPE html>    <!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(value){
  $("button").click(function(value){
    if (value==="hide"){
        $("p").hide();}
    else 
          $("p").show();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button value="hide">Hide me</button>
<button value="show">Show me</button>
</body>
</html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(value){
  $("button").click(function(value){
    if (value==="hide"){
        $("p").hide();}
    else 
          $("p").show();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button value="hide">Hide me</button>
<button value="show">Show me</button>
</body>
</html>

原文

I have trouble hiding and showing the p tag. Could someone help me with this code. What I am
trying to accomplish is that when you click the hide button, the content is hidden. Then when you are ready to show the content you click the show button. I know you can uses the toggle but i dont want to do that

<!DOCTYPE html>    <!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(value){
  $("button").click(function(value){
    if (value==="hide"){
        $("p").hide();}
    else 
          $("p").show();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button value="hide">Hide me</button>
<button value="show">Show me</button>
</body>
</html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(value){
  $("button").click(function(value){
    if (value==="hide"){
        $("p").hide();}
    else 
          $("p").show();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button value="hide">Hide me</button>
<button value="show">Show me</button>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

葬心 2024-10-14 12:17:20

目前它不适用于多个
内容。

这是因为您的页面上有重复的 ID。要解决这个问题，请使用类，并从单击的锚点定位下一个 .slickbox div：

$('a.slick-toggle').click(function() { 
    $(this).next("div").find(".slickbox").toggle(400);
    return false;
});

..并将 ID 更改为类，例如：

<a class="slick-toggle" href="#">Toggle the box</a>
<div style="position:relative; outline: 1px dashed orange; padding:100px;">
    <div class="slickbox" style=" outline: 1px dashed hotpink; background-color:#ccc;position:absolute; top:100px; left: 20px;">
        <h2> music nsme</h2>
        <p>This is the box that will be shown and hidden and togg </p>
    </div>
</div>

Currently it doesn't work with multiple
content.

That is because you have duplicate IDs on your page. To fix that, use classes, and target the next .slickbox div from the clicked anchor:

$('a.slick-toggle').click(function() { 
    $(this).next("div").find(".slickbox").toggle(400);
    return false;
});

..and change the IDs to classes, e.g.:

<a class="slick-toggle" href="#">Toggle the box</a>
<div style="position:relative; outline: 1px dashed orange; padding:100px;">
    <div class="slickbox" style=" outline: 1px dashed hotpink; background-color:#ccc;position:absolute; top:100px; left: 20px;">
        <h2> music nsme</h2>
        <p>This is the box that will be shown and hidden and togg </p>
    </div>
</div>

回复收藏 0 原文

~没有更多了~