Javascript 使用导航栏上的按钮切换div以显示多个信息框_Javascript_Jquery_Html_Css

Javascript 使用导航栏上的按钮切换div以显示多个信息框

javascript jquery html css

Javascript 使用导航栏上的按钮切换div以显示多个信息框,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这是我现在拥有的 $contact.clickfunction{ 如果$contact_div.length{ $contact_div.remove； }否则{ var html=“联系信息””； $'body'.html； } }; $submission.clickfunction{ 如果$submission\u div.length{ $submission\u div.remove； }否则{ var html='提交方法'； $'body'.html； } }; $databas

这是我现在拥有的

$contact.clickfunction{ 如果$contact_div.length{ $contact_div.remove； }否则{ var html=“联系信息”

”； $'body'.html； } }; $submission.clickfunction{ 如果$submission\u div.length{ $submission\u div.remove； }否则{ var html='提交方法

'； $'body'.html； } }; $database.clickfunction{ 如果$database\u div.length{ $database_div.remove； }否则{ var html=； $'body'.html； } }; $frequency.clickfunction{ 如果$frequency\u div.长度{ $frequency_div.remove； }否则{ var html='频繁踢码

'； $'body'.html； } }; @字符集utf-8； /*CSS文档*/ 身体{ 填充：0px；边际：0px；背景图片：urlmages/mark-athena-2.png；背景色：D4； } a{ 文字装饰：无；字体系列：福佑facit半黑体，arial黑色，arial；颜色：999999；字体大小：12px；填充：14px； } 导航{ 背景色：514a79；高度：25px； } a:悬停{ 颜色：E3F2； } /*链接的颜色=E3F2*/ div{ 高度：100px；宽度150px；边框：实心1px；利润率：20px；溢出：隐藏；背景色：E6； } 加速器联系信息

提交方法

频繁踢码

您可以这样做：

Html

您可以使用jQuery.toggle函数，提供文档和示例

您可以为各个导航锚提供一个“id”，并将一个click事件与jQuery关联，该事件将切换您想要的div。我会在所有的课程中使用id，但你也可以在课堂上学习

示例代码如下所示：

<body>
    <nav>
      <a href="#">Home</a>
      <a id="contact" href="#">Contact info</a>
      <a id="submission" href="#">Submission methods</a>
      <a id="database" href="#">Data base</a>
      <a id="frequent" href="#">Frequent kick codes</a>
    </nav>

    <div id="contact_div" class="contact-info">
       <p>Contact info</p> 
    </div>

    <div id="submission_div" class="submission-methods">
       <p>submission methods</p> 
    </div>

    <div id="frequent_div" class="Freqeuent kick-codes">
       <p>frequent kick codes</p> 
    </div>
</body>

注二： 1.原始帖子中缺少数据库部分 2.您需要在页面上包括jQuery，或者将其本地加载到服务器上，或通过CDN将其包括在内，如：

对于这方面的第二个请求，将根据单击添加/删除代码块。jQuery方法会发生变化，对于完整的工作解决方案，您还需要正确地导入jQuery、获取javascript代码，并使用document.ready处理程序来实际初始化元素。代码看起来这个css保持不变

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Accelorator</title>
   <link rel="stylesheet" href="CSS/accel-stylesheet.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.js"></script>
    <script type="text/javascript" src="js/cont.js"></script>
    <script>
            $( document ).ready(function() {
               initialize();
            });
        </script>
</head>

<body>
    <nav>
      <a href="#">Home</a>
      <a id="contact" href="#">Contact info</a>
      <a id="submission" href="#">Submission methods</a>
      <a id="database" href="#">Data base</a>
      <a id="frequent" href="#">Frequent kick codes</a>
    </nav>

    <div id="contact_div" class="contact-info">
       <p>Contact info</p>
    </div>

    <div id="submission_div" class="submission-methods">
       <p>submission methods</p>
    </div>

    <div id="frequent_div" class="Freqeuent kick-codes">
       <p>frequent kick codes</p>
    </div>
</body>
</html>

使用js/cont.js作为：

function initialize() {
    $("#contact").click(function() {
       if ( $( "#contact_div" ).length ) {
          $("#contact_div").remove();
       } else {
          var html='<div id="contact_div" class="contact-info"><p>Contact info</p></div>';
          $('body').append(html);
       }

    });
    $("#submission").click(function() {
       if ( $( "#submission_div" ).length ) {
          $("#submission_div").remove();
       } else {
          var html='<div id="submission_div" class="submission-methods"><p>submission methods</p></div>';
          $('body').append(html);
       }
    });
    $("#database").click(function() {
       if ( $( "#database_div" ).length ) {
          $("#database_div").remove();
       } else {
          var html='';
          $('body').append(html);
       }
    });
    $("#frequent").click(function() {
       if ( $( "#frequent_div" ).length ) {
          $("#frequent_div").remove();
       } else {
          var html='<div id="frequent_div" class="Freqeuent kick-codes"><p>frequent kick codes</p></div>';
          $('body').append(html);
       }
    });
}

那么，有没有一种方法可以说，如果我先点击提交信息，然后点击联系信息？联系人信息将显示在submission methods div？如果这有意义的话？那么有没有一种方法可以让我先点击提交信息，然后点击联系信息？联系人信息将显示在submission methods div？如果这有什么意义？@KaineBishop如果你问的是如何根据你点击它们的时间来追加和显示块，是的，这是可能的，仍然使用jQuery。然后必须查找.append和.remove。让我在fiddle上做一个快速测试。这里有一个新的示例：注意，这些更改是实质性的，因为“append”实际上会添加一段完整的html代码。嗯，它不起作用了。。。我想知道是不是因为我没有正确链接文件，我更新了答案，因为我找不到一个好方法将完整的文件复制/粘贴到JSFIDLE上。基本上，使用jQuery，您通常需要一个“document.ready”处理程序，该处理程序在页面加载完成后立即运行，然后应用所有选择器/函数绑定。这就是$document.ready；功能是为。在js/cont.js中创建一个initialize函数可以使事情更加紧凑和逻辑化。

 $("#contact").click(function(){
    $("#contact_div").toggle();
 });
 $("#submission").click(function(){
    $("#submission_div").toggle();
 });
 $("#database").click(function(){
    $("#database_div").toggle();
 });
 $("#frequent").click(function(){
    $("#frequent_div").toggle();
 });

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Accelorator</title>
   <link rel="stylesheet" href="CSS/accel-stylesheet.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.js"></script>
    <script type="text/javascript" src="js/cont.js"></script>
    <script>
            $( document ).ready(function() {
               initialize();
            });
        </script>
</head>

<body>
    <nav>
      <a href="#">Home</a>
      <a id="contact" href="#">Contact info</a>
      <a id="submission" href="#">Submission methods</a>
      <a id="database" href="#">Data base</a>
      <a id="frequent" href="#">Frequent kick codes</a>
    </nav>

    <div id="contact_div" class="contact-info">
       <p>Contact info</p>
    </div>

    <div id="submission_div" class="submission-methods">
       <p>submission methods</p>
    </div>

    <div id="frequent_div" class="Freqeuent kick-codes">
       <p>frequent kick codes</p>
    </div>
</body>
</html>

function initialize() {
    $("#contact").click(function() {
       if ( $( "#contact_div" ).length ) {
          $("#contact_div").remove();
       } else {
          var html='<div id="contact_div" class="contact-info"><p>Contact info</p></div>';
          $('body').append(html);
       }

    });
    $("#submission").click(function() {
       if ( $( "#submission_div" ).length ) {
          $("#submission_div").remove();
       } else {
          var html='<div id="submission_div" class="submission-methods"><p>submission methods</p></div>';
          $('body').append(html);
       }
    });
    $("#database").click(function() {
       if ( $( "#database_div" ).length ) {
          $("#database_div").remove();
       } else {
          var html='';
          $('body').append(html);
       }
    });
    $("#frequent").click(function() {
       if ( $( "#frequent_div" ).length ) {
          $("#frequent_div").remove();
       } else {
          var html='<div id="frequent_div" class="Freqeuent kick-codes"><p>frequent kick codes</p></div>';
          $('body').append(html);
       }
    });
}