jquery相对一个href="#"删除显示块

Question

<li><a href="#section17"><b>Arbeiten</b></a></li>

这是链接。当我单击此按钮时，它将div(#section17( 的 id 从显示无更改为阻止。

<li><a href="#section15"><b>Feiern</b></a></li>

现在，如果我单击其他链接(#section15(，它应该将显示：块从 #section17 更改为显示：无，并将链接(#section15(更改为显示块

该页面不会重新加载，只是 url 更改了一点点。谁能帮我？

<script type="text/javascript">
    $("a").click(function () {
    var addressValue = $(this).attr("href");
    $(addressValue).css("display","block");
    });
</script>;

Answer 1

演示：http://jsfiddle.net/gvee/qba7e/

.HTML

<ul>
    <li><a href="#section17"><b>section 17</b></a>
    </li>
    <li><a href="#section18"><b>section 18</b></a>
    </li>
    <li><a href="#section19"><b>section 19</b></a>
    </li>
</ul>
<div id="sections-container">
    <div id="section17">section 17</div>
    <div id="section18">section 18</div>
    <div id="section19">section 19</div>
</div>

杰奎里

$('a').click(function (e) {
    // Prevent jumping to anchor
    e.preventDefault();
    // Hide all other sections
    $('#sections-container > div').css('display', 'none');
    // Show only one we want
    var addressValue = $(this).attr('href');
    $(addressValue).css('display', 'block');
});

Answer 2

您必须取消链接的默认行为：

$("a").click(function (event) {
    event.preventDefault();
    var addressValue = $(this).attr("href");
    $(addressValue).css("display","block");
});

Answer 3

你的代码应该是这样的

<script type="text/javascript">
        function HideShow(ctrl) {
            var addressValue = $(ctrl).attr("href");
            $(addressValue).css("display", "block");
        }
    </script>
    <li><a href="#section17" onclick="HideShow(this);"><b>Arbeiten</b></a></li>
    <li><a href="#section15" onclick="HideShow(this);"><b>Feiern</b></a></li>

Answer 4

如果您为所有部分提供一类sectionClass然后隐藏具有此类的所有元素，并在单击时显示相关元素，您应该开展业务。

$("a").click(function (e) {
    e.preventDefault();
    var addressValue = $(this).attr("href");
    $(".sectionClass").hide();
    $(addressValue).show();
});