多个div元素根据用户单击的位置交换出来

Question

我有一个网站，我想动态化。我决定让每个页面都带有

标签

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

JS会改变样式。显示特定元素的内联，但使其他元素style.display="none"。

appear(){
  document.getElementByID('divID).style.display='inline';
  ...
}

我对jquery没什么经验，但如果需要的话，我愿意学习，

我不确定我的措辞是否正确，所以如果你需要更多的信息，我很乐意帮助:)

克里斯

编辑

用户有一个任务栏，完全可见。当他们单击任务栏中的按钮时，我希望页面的div元素从无更改为内联。当用户单击另一个按钮时，我希望他们之前查看的按钮变回display:none，并显示新的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代码，我很喜欢Jeff Clarke的想法。我会尝试一下，让你知道它是否有效!

Answer 1

如果你将某物设置为display:none，它基本上是不可见的交互-它不会响应点击事件

为按钮添加点击事件，以显示和隐藏各种div。

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

在你的javascript中:

var curDiv;
function showDiv(id) {
  //hide current div
  if (curDiv != null) {
    document.getElementByID(curDiv).style.display="none";
  } 
  document.getElementByID(id).style.display="inline";
  curDiv = id;
}

Answer 2

我想我明白了。首先，它将有一个特定的比例可见用户和点击它…它将显示完整的细节，而其他部分将被压缩。如果我是对的……这实际上叫做手风琴。下面是解决方案:

我们实际上要做的是……我们将固定其高度或宽度，并设置overflow:hidden来隐藏外部的额外内容。我们将在它的CSS中这样做。

现在onClick我们将添加一个类，比如…"当前"

在它的定义中，我们将增加div的高度/宽度到像400px这样的程度，或者根据我们的要求。*我们可以使用css transition: all .5s ease-in-out;

现在我们将首先删除'。从该组中所有div元素中的当前'类，然后使用'this'将其添加到已单击的元素....

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

如果你需要'制表结构'，你最近在你的问题编辑中提到的，那么你可以使用下面的代码…它说通过点击按钮'x'与标题'fDiv'打开div有id='fDiv'，点击按钮'y'与标题'sDiv'打开div有id='sDiv'，点击按钮'z'与标题'tDiv'打开div有id='tDiv'。

所以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>

现在jQuery:

$('#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*/
});