Javascript 单击“添加显示和隐藏div”

我有一个跨度，它就像一个按钮，根据您单击的跨度来显示div。每个跨距都有一个on div，其中包含其内容，该内容在onload时显示为none。问题是单击时的跨度没有任何作用。它应该显示它的内容

HTML

剧本

$(function(){
    $(".btn1").click(function(){
        $(".section-1").css("display","block");
    $(".section-2, .section-3, .section-4").css("display","none");
    }); 
  $(".btn2").click(function(){
        $(".section-2").css("display","block");
    $(".section-1, .section-3, .section-4").css("display","none");
    }); 
  $(".btn3").click(function(){
        $(".section-3").css("display","block");
    $(".section-2, .section-1, .section-4").css("display","none");
    }); 
  $(".btn4").click(function(){
        $(".section-4").css("display","block");
    $(".section-2, .section-3, .section-1").css("display","none");
    }); 
}); 

拨弄 可以接受其他Javascript或jquery解决方案

拨弄 对于活动状态，请解决上述问题

脚本活动状态：

$(function(){
    $(".btn-click").click(function(){
            var active = $(this).addClass("active")
        var target = $(this).data("action");
      $("."+target).show().siblings("div[class*=section-]").hide();
  })
}); 

---

看起来您没有包括jQuery

我在左边的外部资源部分添加了它，现在它可以工作了

以下是如何将其包含在您的代码HTML中：

<script   src="https://code.jquery.com/jquery-2.2.3.min.js"   integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="   crossorigin="anonymous"></script>

---

您的代码不起作用，因为您没有包含jQuery。试着在小提琴中加上它会起作用的

但是，如果您可以用更短的代码巧妙地完成，为什么还要编写这么长的代码呢

以下是jQuery：

是的，就是这样，但是，如果HTML是这样的：

---

谢谢你。伟大的方法！还有一件事，先生。我想向按钮添加活动状态。但是，当单击其他按钮时，如何删除活动类？检查更新的小提琴。

$(function(){
    $(".btn-click").click(function(){
            var active = $(this).addClass("active")
        var target = $(this).data("action");
      $("."+target).show().siblings("div[class*=section-]").hide();
  })
}); 

<script   src="https://code.jquery.com/jquery-2.2.3.min.js"   integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="   crossorigin="anonymous"></script>

$(function(){
    $(".btn-click").click(function(){
        var target = $(this).data("action");
      $("."+target).show().siblings("div[class*=section-]").hide();
  })
}); 

<p class="lead"><span class="productbtn btn1 btn-click" data-action="section-1">FRESH</span><span class="productbtn btn2 btn-click" data-action="section-2">CHILLED</span><span class="productbtn btn3 btn-click" data-action="section-3">FROZEN</span><span class="productbtn btn4 btn-click" data-action="section-4">DRY</span></p>

<div class="section-1" style="display:none">
ASDQWEXZC
</div>

<div class="section-2"  style="display:none">
1234567896
</div>

<div class="section-3"  style="display:none">
1234567896
</div>

<div class="section-4"  style="display:none">
1234567896
</div>