0

我想创建两个选项卡式div：“关于我们”和“联系人”。我特别想要的是当我单击其中一个时，一个零售到单击的选项卡的面板将出现在它的下方，我用它来添加事件的方法监听选项卡式 divs ，然后将单击元素的 id 与相关面板的 id 进行比较，然后通过添加“活动类”来显示面板，并通过删除“活动”类来删除另一个面板。不知何故我无法完成它，我需要一些指导。提前致谢。

- HTML代码：

<div class="tabbed-content">
              <ul class="tabs">
                <li class="list" data-target="#about" >About us</li>
  
                <li class="list" data-target="#contact">Contact</li>
              </ul>

              <div class="pannel" id="about">
                <p>who we are?</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
              </div>
              <div class="pannel active" id="contact">
                <p>lets keep in touch</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
              </div>

            </div>

JAVASCRIPT代码：

const tabs=document.querySelector(".tabbed-content");
const panels =document.querySelectorAll("pannel");
tabs.addEventListener('mouseenter', function(e){
    if(e.target.className==document.querySelector(".list"))
    {
        const targetpanel=document.querySelector(e.target.dataset.target);
        panels.forEach(function(panel){
            if(panel==targetpanel){
                panel.classList.add("active")
            }
            else{
                panel.classList.remove("active")
            }
        });
    }
})
4

2 回答 2

1

看起来您实际上已经附加了一个mouseenter侦听器，暗示您正在寻找悬停功能。如果是这种情况，则可以使用以下纯 CSS 来完成。

.panel {
  display: none;
}

li:hover .panel {
  display: block;
}
<div class="tabbed-content">
  <ul class="tabs">
    <li>
      <h2 class="list" data-target="#about">About us</h2>
      <div class="panel" id="about">
        <p>who we are?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </div>
    </li>
    <li>
      <h2 class="list" data-target="#contact">Contact</h2>
      <div class="panel active" id="contact">
        <p>lets keep in touch</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
      </div>
    </li>
  </ul>
</div>

但是，如果您确实在寻找点击功能，这里有一个简单的工作片段，使用onclick和classList.toggle().

function toggleActive(e) {
const targetPanelId = e.target.getAttribute('data-target');
  const targetPanel =  document.getElementById(targetPanelId);
  const activePanels = document.getElementsByClassName('active');
  if (activePanels) {
    activePanels[0].classList.toggle('active');
  }
    targetPanel.classList.toggle('active');
}
.panel {
  display: none;
}

.panel.active {
  display: block;
}
<div class="tabbed-content">
  <ul class="tabs">
    <li class="list" data-target="about" onclick="toggleActive(event)">About us</li>
    <li class="list" data-target="contact" onclick="toggleActive(event)">Contact</li>
  </ul>
  <div class="panel" id="about">
    <p>who we are?</p>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="panel active" id="contact">
    <p>lets keep in touch</p>
    <p>Cconsectetur adipisicing elit</p>
  </div>
</div>

于 2020-08-14T09:46:49.600 回答
0

这一行应该是 const panels =document.querySelectorAll(".pannel"); 按你添加“.”的类来选择的。这是一个可能的工作版本：

  const tabs = document.querySelectorAll(".list");
  const panels = document.querySelectorAll(".pannel");
  for(let listItem of tabs) {
    listItem.addEventListener("mouseenter", function (e) {
        const dataTarget = e.target.getAttribute('data-target');
        const targetpanel = dataTarget.substr(1);

        panels.forEach(function (panel) {
                if (panel.id == targetpanel) {
                    panel.classList.add("active");
                } else {
                    panel.classList.remove("active");
                }
        });
    });
  }
于 2020-08-14T08:52:46.903 回答