Question

我在字母表上发生了几次不同的切换。我想要包含一个“全部查看”按钮，该按钮将打开已关闭的按钮。此外，我希望在您访问该页面时自动打开一个切换（div1又名字母A）。

这是jQuery：

$(document).ready(function() {
    $('a').click(function () {
        event.preventDefault();
        var divname= this.name;
        $("#"+divname).show("slow").siblings().hide("slow");
    });
});

这是HTML：

<p>
    <a href="#" name="div1">A</a> B C D E F G H
    <a href="#" name="div2">I</a>
    <a href="#" name="div3">J</a> K L
    <a href="#" name="div4">M</a> N O P Q R
    <a href="#" name="div5">S</a> T U V W X Y Z See All
</p>
<div>
    <div id="div1" style="display: none;">testing div1</div>
    <div id="div2" style="display: none;">testing div2</div>
    <div id="div3" style="display: none;">testing div3</div>
    <div id="div4" style="display: none;">testing div4</div>
    <div id="div5" style="display: none;">testing div5</div>
</div>

这里还有JSFiddle的链接：http://jsfiddle.net/fL98p183/

Answer 1

fiddle

上的演示

HTML：

<p>
  <a href="#" name="div1">A</a>
  B C D E F G H
  <a href="#" name="div2">I</a>
  <a href="#" name="div3">J</a>
  K L
  <a href="#" name="div4">M</a>
  N O P Q R
  <a href="#" name="div5">S</a>
  T U V W X Y Z See All
</p>

<div>
  <div id="div1" style="display: none;">testing div 1</div>
  <div id="div2" style="display: none;">testing div2</div>
  <div id="div3" style="display: none;">testing div3</div>
  <div id="div4" style="display: none;">testing div4</div>
  <div id="div5" style="display: none;">testing div5</div>
</div>

使用Javascript：

$(document).ready(function () {

    $("#div1").show("slow").siblings().hide("slow");

    $('a').click(function () {
        var divname = this.name;
        $("#" + divname).show("slow").siblings().hide("slow");
    });

    $('#seeAll').click(function() {
        $('#div1').show("slow")
        $('#div2').show("slow")
        $('#div3').show("slow")
        $('#div4').show("slow")
        $('#div5').show("slow")
    })
});

添加查看全部链接以切换并使用jQuery默认打开一个

1 个答案:

fiddle