Javascript 根据用户单击的位置调出多个div元素

我有一个网站，我正在尝试动态化。我已经决定把每一页都贴上标签

  <div id=divID' style='display:none' onmouseclick='appear()' > ... </div>

我对jquery几乎没有经验，但如果需要，我愿意学习

我不确定我的措辞是否正确，因此如果您需要更多信息，我很乐意提供帮助：）

克里斯

编辑

用户有一个完全可见的任务栏。当他们点击任务栏上的按钮时，我希望页面的div元素从none变为inline。当用户单击另一个按钮时，我希望他们以前查看的按钮改回显示：无，并显示新的div

编辑DOS

<div id="taskbar" onclick="showDiv()" >

        <a id="about" href="/about" >
            ABOUT</a>

        <a id="speakers" href="/speakers">
            SPEAKERS
        </a>
        <a id="team"  href="/team">
            TEAM
        </a>
        <a id="tickets" href="/tickets" >
            TICKETS
        </a>
        <a id="sponsors" href="/sponsors" >
            SPONSORS
        </a>
        <a id="contact-us" href="/contact">
            CONTACT US
        </a>
        <a id="home-page" href='/' class="button">
            HOME
        </a>
</div>

---

至于JS代码，我喜欢杰夫·克拉克的想法。我会尝试一下，让你知道它是否有效

如果您将something设置为

display:none

，它本质上对交互不可见——它不会响应单击事件

更新

将单击事件添加到按钮以显示和隐藏各种div

<button onclick="showDIV('divID1')">Show 1</button>
<button onclick="showDIV('divID2')">Show 2</button>

---

我想我明白了。首先，它将有一个特定的比例可见的用户和点击它。。。它将显示完整的细节，其他人将受到挤压。如果我是对的。。。这就是手风琴。以下是解决方案：

我们将要做的是。。。我们将固定其高度或宽度，并将溢出：隐藏以将额外内容隐藏在外部。我们将在它的CSS中实现这一点

现在单击，我们将添加一个类，比如说..'电流'

在其定义中，我们将增加div的高度/宽度，使其达到400px或符合我们的要求。*我们可以使用css过渡，使平滑的效果：过渡：所有。5s轻松进出

现在，我们将首先从该组中的所有div元素中删除“.current”类，然后使用“this”将其添加到单击的div元素上

请在下面查找jQuery

$('#idOfParentContainer .classCommonOnDivs').on('click', function(){
        $('#idOfParentContainer .classCommonOnDivs').removeClass('current');
        $(this).addClass('current');
    });

如果您需要“选项卡结构”，这是您最近在问题编辑中提到的，那么您可以使用以下代码。。。 点击标题为“fDiv”且id='fDiv'打开div的按钮“x”，点击标题为“sDiv”且id='sDiv'打开div的按钮“y”，点击标题为“tDiv”且id='tDiv'打开div的按钮“z”

所以HTML结构

<div id="parent">
    <button id="x" title="fDiv">Clicked for First Div</button>
    <button id="y" title="sDiv">Clicked for First Div</button>
    <button id="z" title="tDiv">Clicked for First Div</button>
</div>
<div class="tab-content">
    <div id="fDiv">First Div Content</div>
    <div id="sDiv">Second Div Content</div>
    <div id="tDiv">Third Div Content</div>
</div>

---

用户将如何单击未显示的元素？我已编辑了上面的问题，以更好地反映我的情况。请通读编辑并让我知道你是否能更好地回答我的问题。我编辑了我的问题。与页面交互的用户将显示一个任务栏。当用户单击任务栏上的一个按钮时，相应的页面将从display:none更改为display:inline。这更有意义吗？我很抱歉问了这么模糊的问题。问题是，在我这方面，它甚至还没有完全编码&在我的问题措辞时，几乎没有什么可以改变的。好的。您需要将单击处理程序添加到按钮，而不是要显示和隐藏的div。注意。但是DOM链不会使嵌套在div元素下面的所有元素也出现吗？我写了一些代码，稍后我会添加到问题中，这样你就可以更好地了解我们正在（尝试）处理什么。是的，我想我需要看看这个例子。

$('#idOfParentContainer .classCommonOnDivs').on('click', function(){
        $('#idOfParentContainer .classCommonOnDivs').removeClass('current');
        $(this).addClass('current');
    });

<div id="parent">
    <button id="x" title="fDiv">Clicked for First Div</button>
    <button id="y" title="sDiv">Clicked for First Div</button>
    <button id="z" title="tDiv">Clicked for First Div</button>
</div>
<div class="tab-content">
    <div id="fDiv">First Div Content</div>
    <div id="sDiv">Second Div Content</div>
    <div id="tDiv">Third Div Content</div>
</div>

$('#parent button').on('click', function(){
    $('#parent button').removeClass('current'); /*For remove formatting of 'current button' */
    $(this).addClass('current'); /*For formatting '.current button differently' */
    $('.tab-content > div').hide(); /*First of all hiding all divs*/
    $('.tab-content > div').removeClass('current');/*Removing '.current' class if uses*/
    var tabId=$(this).attr('title');/*Taking value of ID from clicked button's title.*/
    $('#'+tabId+'').fadeIn(400); /* Display:block the current div*/
    $('#'+tabId+'').addClass('current');/* Adding class if need any specific formatting, not necessary to do this*/
});