根据链接点击显示内容。并隐藏之前选择的

Question

我想根据链接点击显示内容。并隐藏之前选择的内容。

有什么办法吗？ 注意：我不想更改标记。

Here is jsFiddle

HTML：

<ul class="nav nav-stacked" id="nav-stacked">
    <li class="active"><a href="#" onclick="show_content('dashboard', this)"><i class="fa fa-dashboard fa-fw"></i>Dashboard</a>

    </li>
    <li id="vollist-container" class="menu open"><a href="#" class="menu-toggle"><i class="fa fa-sort-alpha-asc fa-fw"></i>Volumes<i class="caret"></i></a> 
        <ul id="vol-list" class="submenu">
            <li> <a href="javascript:void(0);" onclick="show_content('vol1', this)">
                    <span>vol1</span>
                </a>

            </li>
            <li> <a href="javascript:void(0);" onclick="show_content('vol2', this)">
                    <span>vol2</span>
                </a>

            </li>
        </ul>
    </li>
</ul>
<div id="content">
    <div id="dashboard" class='show'>dashboard</div>
    <div id="volumes">
        <div id="vol1" class="hide">vol 1</div>
        <div id="vol2" class="hide">vol 2</div>
    </div>
</div>

jQuery的：

function show_content(id, element) {
    var children = $("#content").children();
    children.filter(function () {
        return $(this).css('display') == 'block';

    }).hide();

    $("#" + id).parent().css('display') == 'none' ? $("#" + id).parent().show() : null;
    $("#" + id).toggleClass('hide');
}

Answer 1

此功能可满足您的需求：

function show_content(id, element) {
    $('#content > div').hide();
    $('#' + id).show();
}

注意：

• 您不需要.show和.hide CSS类
• 你仍然需要通过CSS或jQuery隐藏页面加载的所有内容div。
• 不需要元素参数。
• jQuery提供了更优雅的方法来解决这个问题，但上面的函数应该回答你的问题。

Answer 2

<script>
function showSomething()
{
    $("#div1").hide();
    $("#div2").show();

</script>

围绕你的div：

<a href="Javascript:showSomething();">
<div></div>
</a>