Jquery Can'；t使用按钮显示一个div，隐藏其余div

我有四个按钮，我想能够点击它们，只看到他们的div，没有其他。我已经看到了很多解决方案，但它们似乎不适用于按钮而不是链接。我需要用于淡入淡出效果的按钮（或者至少，这是我使淡入正常工作的唯一方法…） 这是我的HTML。父类仅用于格式化，下面是我的按钮。我想让l1转到第1部分，基本上是第1部分

<div class="parent">
    <div id="div1" style="display:none;">About me content</div>
    <div id="div2" style="display:none;">About me content</div>
</div>
<div class="up">
<pre>
<a href="http://www.brynntweeddale.com/"><img src="http://www.brynntweeddale.com/images/logo.png" style="width: 123px; height: 60px; vertical-align: middle;" /></a><button id="l1" onclick="fade(this);">ABOUT</button><button id="l2" onclick="fade(this);">PHOTOGRAPHY</button><button id=" l3">DESIGN</button><button id="l4" onclick="fade(this);">CONTACT</button></pre>
</div>

但是对于按钮而不是链接

---

总的来说，我觉得我真的很困惑。

我不确定是否可以帮助您，但这可以作为一个起点：

注意：我假设您使用的是

JQuery

和

Bootstrap

HTML

$(function () {
    $('.parent  div').hide();

    $('.btn').on('click', function(){
        $('.parent  div').hide();
        var bid = $(this)[0].id[1];
        var sel = '#div' + bid;
        $(sel).fadeToggle();

    });
});

---

旁注：

未指定类型将被视为表单提交按钮。为什么要使用

来包围导航？我需要修复按钮名称，但它们周围通常有空格，需要考虑。我只是胡乱摆弄，他们现在不在那里。我对按钮或按钮类型了解不多。这能解决我的问题吗。你应该做一个JSFiddle；2.您应该删除

；3.您应该在所有按钮中添加

type=“button”

/不要使用

标记（改用CSS）。如果我删除pre，我需要的空格将不再显示。我不明白我要把这个按钮改成什么，但我想我还是继续玩吧。用CSS来调整视觉间距。你的CSS在哪里？它在Chrome和Firefox中运行得非常好，在IE中运行得非常出色，但我要买它！谢谢

<div class="parent">
    <div id="div1" style="display:none;">DIV1 content</div>
    <div id="div2" style="display:none;">DIV2 content</div>
    <div id="div3" style="display:none;">DIV3 content</div>
    <div id="div4" style="display:none;">DIV4 content</div>
</div>
<div class="up">
<a href="http://www.brynntweeddale.com/"><img src="http://www.brynntweeddale.com/images/logo.png" style="width: 123px; height: 60px; vertical-align: middle;" /></a>

    <button id="l1" class='btn' >ABOUT</button>
    <button id="l2" class='btn' >PHOTOGRAPHY</button>
    <button id="l3" class='btn' >DESIGN</button>
    <button id="l4" class='btn' >CONTACT</button>
</div>

$(function () {
    $('.parent  div').hide();

    $('.btn').on('click', function(){
        $('.parent  div').hide();
        var bid = $(this)[0].id[1];
        var sel = '#div' + bid;
        $(sel).fadeToggle();

    });
});