Question

我有一个跨度，就像一个按钮来显示div，具体取决于你点击的跨度。每个span都有其div包含其内容，在onload时不显示。问题是点击时的跨度不起作用。它应该显示其内容。

HTML

<p class="lead"><span class="productbtn btn1">FRESH</span><span class="productbtn btn2">CHILLED</span><span class="productbtn btn3">FROZEN</span><span class="productbtn btn4">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><p class="lead"><span class="productbtn btn1">FRESH</span><span class="productbtn btn2">CHILLED</span><span class="productbtn btn3">FROZEN</span><span class="productbtn btn4">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>

CSS

.productbtn:hover, productbtn:active {
    background: #bdc3c7;
    color: #fff;
}
.productbtn {
    padding: 20px;
    background: #ecf0f1;
    margin: 10px;
    width: 250px;
    display: inline-block;
    cursor: pointer;
    transition: .3s ease all;
}

SCRIPT

$(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");
    }); 
});

FIDDLE HERE 其他Javascript或jquery解决方案是可以接受的。

FIDDLE HERE 对于活动状态，请解决上述问题。

SCRIPT ACTIVE STATUS：

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

Answer 1

看起来不像你包含jQuery

我在左侧的外部资源部分添加了它，现在它可以正常工作https://jsfiddle.net/aLkd4545/1/

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

ñ

Answer 2

您的代码无效，因为您没有包含jQuery。尝试在小提琴中添加它将起作用。

但是为什么要用更短的代码巧妙地编写那长代码呢？

以下是jQuery：

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

是的，但是，如果HTML就像：

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

跨度点击添加显示并隐藏div

2 个答案: