javascript - 隐藏和显示 div 单击 a

Question

我想隐藏id当我点击一个 href 时，它会显示相同的 ID，而其他 ID 将自动关闭

例子:

<div id="fit" class="heading">FIT</div>
<a href="#er">first</a>
<div id="er" style="display:none;">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div>
<a href="#erp">erp</a>
<div id="erp" style="display:none;">erp </div>
<div id="style" class="heading">style</div>

和脚本:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(e) {
    $("a").click(function(e) {
        var ab = $(this).attr("href");
        //alert(ab);
        //$("div").hide();
        $(ab).show();

    });
});
</script>

Answer 1

在 html 中为 anchor 相关的 div 使用类

<div id="fit" class="heading">FIT</div>
<a href="#er">first</a>
<div id="er" style="display:none;" class="anchorrel">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div>
<a href="#erp">erp</a>
<div id="erp" style="display:none;" class="anchorrel">erp </div>
<div id="style" class="heading">style</div>




<script>
    $(document).ready(function(e) {
        $("a").click(function(e) {
        e.preventDefault();
            var ab = $(this).attr("href");
            //alert(ab);
            $(".anchorrel").hide();// all div related to .anchorrel hide
            $(ab).show();

        });
    });
    </script>

参见 demo