Question

我想用单选按钮隐藏div，直到他们点击了标题，但有些东西是，但是因为现在我无法让他们在点击标题时显示上。任何帮助表示赞赏 SPIKE``

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup Web Editor (www.coffeecup.com)">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link href="mebbe2.css" rel="stylesheet"/>

    <style>
        body {
            background-color: #7094B8;
        }

        .container {
            position: relative;
            left: 24%;
        }

        h1 {
            align-text: center;
        }

        #butt {
            display: block;
            background-color: #e5eecc;
            height: 230px;
            width: 500px;
            padding: 3px;
            border: solid 2px #c3c3c3;
        }

        p {
            font-weight: bold;
            font-size: 22px;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="select">
        <h1>Select Your Preferred Search</h1>

        <p>Click on your choice of search method.</p>
        <button id="communities">Communities Served</button>
        <br>
        <button id="specialties">Therapeutic Specialties</button>
        <br>
        <button id="insurance">Insurance Accepted</button>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".special,.commune,.insure").hide();
            });
        </script>

        <script>
            $(document).ready(function () {
                $("#communities").click(function () {
                    $(".select, .special, .insure").hide();
                });
                $("#show").click(function () {
                    $(".commune").show();
                });
            });
            $(document).ready(function () {
                $("#specialties").click(function () {
                    $(".select,.insure,.commune").hide();
                });
                $("#show").click(function () {
                    $(".special").show();
                });
            });
            $(document).ready(function () {
                $("#insurance").click(function () {
                    $(".select,.special,.commune").hide();
                });
                $("#show").click(function () {
                    $(".insure").show();
                });
            }); </script>
    </div>
    <div class="commune" id="butt"><h3>Choose Your Community</h3>

        <form action="input">
            <input type="radio" name="common" value="caucasion">Caucasion<br>
            <input type="radio" name="common" value="hispanic">Hispanic<br>
            <input type="radio" name="common" value="carribean">Carribean<br>
            <input type="radio" name="common" value="africanAmerican">African-American<br>
            <input type="radio" name="common" value="male">Male<br>
            <input type="radio" name="common" value="female">Female<br>
            <input type="radio" name="common" value="professional">Professional<br>
            <input type="radio" name="common" value="lGBT">LGBT<br>
            <input type="radio" name="common" value="youth">Youth
        </form>
    </div>
    <div class="special" id="butt">
        <h3>Choose Your Specialty</h3>

        <form action="input">
            <input type="radio" name="spec" value="groups">Groups<br>
            <input type="radio" name="spec" value="couples">Couples<br>
            <input type="radio" name="spec" value="abuse">Abuse<br>
            <input type="radio" name="spec" value="addictions">Addictions<br>
            <input type="radio" name="spec" value="loss">Loss<br>
            <input type="radio" name="spec" value="depression">Depression<br>
            <input type="radio" name="spec" value="family">Family Conflict<br>
            <input type="radio" name="spec" value="esteem">Self Esteem
        </form
    </div>
    <div class="insure" id="butt">
        <h3>Choose Your Insurance </h3>

        <form action="input">
            <input type="radio" name="insur" value="harvard">Harvard Pilgrim<br>
            <input type="radio" name="insur" value="blueCross">Blue Cross and Blue Shield<br>
            <input type="radio" name="insur" value="tufts">Tufts<br>
            <input type="radio" name="insur" value="healthNet">Health Net<br>
            <input type="radio" name="spec" value="loss">Loss<br>
            <input type="radio" name="insur" value="humana">Humana<br>
            <input type="radio" name="spec" value="loss">Loss<br>
            <input type="radio" name="insur" value="cigna">Cigna
        </form>

    </div>

</body>
</html>

Answer 1

我猜你想要这个。 http://jsfiddle.net/Xqm77/1/

$(document).ready(function () {
    $(".special,.commune,.insure").hide();
    $("#communities").click(function () {
        $(".select, .special, .insure").hide();
        $(".commune").show();
    });
    $("#specialties").click(function () {
        $(".select,.insure,.commune").hide();
        $(".special").show();
    });
    $("#insurance").click(function () {
        $(".select,.special,.commune").hide();
        $(".insure").show();
    });
});

但是，当您添加一点HTML时，可以写得更短。向每个按钮添加数据属性，并使用该属性来了解要显示的部分。像这样：

<button id="communities" data-show="commune">Communities Served</button>

通过这样做，您可以使用单击功能。在此处查看此操作：http://jsfiddle.net/Xqm77/2/

$(document).ready(function () {
    $(".container > div:not(#select)").hide();
    $("#select button").click(function() {
        var $this = $(this),
            toShow = $this.data("show");
        $(".container > div:not(#select)").hide().filter("."+toShow).fadeIn("slow");
    });
});

使用单选按钮隐藏和显示带有Jquery的div

1 个答案: