文章/答案/技术大牛

发布

社区首页 >问答首页 >JavaScript一次切换一个

问JavaScript一次切换一个
EN

Stack Overflow用户

提问于 2018-03-21 13:01:36

回答 1查看 404关注 0票数 1

我需要一些帮助来一次切换一个问题。我想要显示一个问题，当我单击另一个问题时，旧问题将消失。

标题

以下是我的代码

我不确定如何让他们一次只出现一个，我尝试了许多不同的方法，但仍然没有想出任何方法。

<html lang="en">
<head>
<meta charset="UTF-8">
<title>FAQs</title>
<link rel="stylesheet" href="main.css">
<script src="faqs.js"></script>     
</head>

 <body>
 <main id="faqs">
    <h1>JavaScript FAQs</h1>
    <h2><a href="#" >What is JavaScript?</a></h2>
    <div>
        <p>JavaScript is a is a browser-based programming language 
           that makes web pages more responsive and saves round trips to the 
 server.
        </p>
    </div>
    <h2><a href="#">What is jQuery?</a></h2>
    <div>
        <p>jQuery is a library of the JavaScript functions that you're most 
 likely 
           to need as you develop websites.
        </p>
    </div>
    <h2><a href="#">Why is jQuery becoming so popular?</a></h2>
    <div>
        <p>Three reasons:</p>
        <ul>
            <li>It's free.</li>
            <li>It lets you get more done in less time.</li>
            <li>All of its functions are cross-browser compatible.</li>
        </ul>
    </div>
</main>
</body>
</html>

"use strict";
var $ = function(id) { return document.getElementById(id); };

// the event handler for the click event of each h2 element

var toggle = function() {

var h2 = this;                   
// clicked h2 tag     

 var div = h2.nextElementSibling; 
 // h2 tag's sibling div tag

// toggle plus and minus image in h2 elements by adding or removing a class

if (h2.hasAttribute("class")) { 
    h2.removeAttribute("class");    
} else { 
    h2.setAttribute("class", "minus"); 
}

//toggle div visibility by adding or removing a class

if (div.hasAttribute("class")) { 
    div.removeAttribute("class");
} else { 
    div.setAttribute("class", "open"); 
} 
};

javascript

jquery

css

html

回答 1

Stack Overflow用户

发布于 2018-03-21 13:17:04

请执行以下操作：

最初使用CSS
隐藏所有答案将questions和answers保存到JS文件中的变量
Add函数，该函数在单击任何问题时执行<代码>H19隐藏所有答案
- 显示与单击的代码相关的答案

var questions = $("h2 a");
var answers = $("h2 + div");

questions.on("click", function(event) {
  
  event.preventDefault();
  
  var answer = $($(this).attr("href"));
  answers.hide();
  answer.show();

});

h2 + div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<main id="faqs">
  <h1>JavaScript FAQs</h1>
  <h2><a href="#q1" >What is JavaScript?</a></h2>
  <div id="q1">
      <p>JavaScript is a is a browser-based programming language 
         that makes web pages more responsive and saves round trips to the 
server.
      </p>
  </div>
  
  <h2><a href="#q2">What is jQuery?</a></h2>
  <div id="q2">
      <p>jQuery is a library of the JavaScript functions that you're most 
likely 
         to need as you develop websites.
      </p>
  </div>
  <h2><a href="#q3">Why is jQuery becoming so popular?</a></h2>
  <div id="q3">
      <p>Three reasons:</p>
      <ul>
          <li>It's free.</li>
          <li>It lets you get more done in less time.</li>
          <li>All of its functions are cross-browser compatible.</li>
      </ul>
  </div>
</main>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49398519

复制

相似问题

问JavaScript一次切换一个
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript一次切换一个EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript一次切换一个
EN