javascript - jquery relative a href="#" 删除显示块

Question

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

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

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

现在，如果我单击另一个链接（#section15），它应该将 display:block 从 #section17 再次更改为 display:none 并将链接（#section15）更改为显示块

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

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

</script>;

Answer 1

你的代码应该是这样的

<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 2

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

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

Answer 3

演示：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>

jQuery

$('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 4

如果你给所有部分一个类sectionClass然后隐藏这个类的所有元素并在点击时显示相关的元素你应该做生意。

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