Question

我有一个网站，我试图动态化。我决定让每个页面都带有标签

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

JS会将特定元素的style.display更改为内联，但将其他元素设为style.display =＆＃34; none＆＃34;。

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

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

我不确定我是否正确表达了这一点，所以如果您需要更多信息，我乐意为您提供帮助：）

克里斯

修改

用户有一个完全可见的任务栏。当他们点击任务栏中的按钮时，我希望页面的div元素从无变为内联。当用户点击另一个按钮时，我希望他们之前查看的按钮更改回显示：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

我想我明白了。首先，用户可以看到特定比例并点击它...它将显示完整的细节，其他将被挤压。如果我是正确的...那么这实际上被称为手风琴。这是解决方案：

我们将实际做什么...我们将修复其高度或宽度并将溢出：隐藏以隐藏外部的额外内容。我们将在CSS中进行此操作。

现在onClick我们将添加一个类，让我们说..＆＃39;当前＆＃39;

在其定义中，我们将根据我们的要求将div的高度/宽度增加到400px或更高的范围。 *我们可以使用css过渡来实现平滑效果：过渡：所有.5s轻松进出;

现在我们首先删除＆＃39; .current＆＃39;来自该组中所有div元素的类，然后使用＆＃39; this＆＃39; ....将其添加到点击的元素上....

下面查看jQuery ...

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

如果您需要最近在问题编辑中提到的“标签结构”，那么您可以使用以下代码... 它通过点击按钮＆＃39; x＆＃39;标题＆＃39; fDiv＆＃39;打开div，其中有id =＆＃39; fDiv＆＃39;，点击按钮＆＃39; y＆＃39;标题＆＃39; sDiv＆＃39; open div，其id =＆＃39; sDiv＆＃39;并点击按钮＆＃39; z＆＃39;标题＆＃39; tDiv＆＃39; open div，id =＆＃39; tDiv＆＃39;。

所以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*/
});

根据用户点击的位置换出多个div元素

2 个答案: