Question

这是我的代码缺少不需要的信息。

<div>   
  <div id="one" class="button"></div>
  <div id="two" class="button"></div>       
</div>

<div>
    <div class="Home tab">
      <h1> Hello </h1>
      <p> This is my amazing page </p>
    </div>

    <div class="other tab">
      <h1> art blah blag </h1>
      <p> This is my amazing page </p>
    </div>      
</div>

<script>
    $( "div.button" ).click(function() {
      $( "div.Home" ).toggleClass( "Show" );
      $( "div.Home" ).toggleClass( "tab" );
   });
</script>

<style>
   .tab
   {
      display: none;
   }
   .Show
   {
      display: block;
   }
</style>

此代码包含我的问题，简单地说我想点击按钮一并设置回家然后点击按钮2并设置其他等等。但我是Js的新手，我似乎无法让它工作。我试着用两个按钮设置回家，但那也不起作用。

请帮助我感到困惑。

Answer 1

您好KbCoder请检查以下代码，

<!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Document</title>
                <style>
                    .tab{display: none;}
                </style>
            </head>
        <body>
        <div>   
                    <div data-id="one" class="one button">1st tab</div>
                    <div data-id="two" class="two button">2nd tab</div>       
                </div>

                <div>
                    <div id="one" class="Home tab">
                        <h1> Hello </h1>
                        <p> This is my amazing page </p>
                    </div>

                    <div id="two" class="other tab">
                        <h1> art blah blag </h1>
                        <p> This is my amazing page </p>
                    </div>      
                </div>

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script>
                    $(document).ready(function(){
                        $("#one").show();
                        $('.button').click(function(){                
                            $('.tab').hide();
                            $("#" + $(this).data('id')).show();
                        });
                    });
                </script>
            </body>
        </html>

Answer 2

在代码中包含jquery库。在脚本标记之前添加：

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Answer 3

您的帖子中的代码可以使用，但不适用于第二个按钮。您无法切换第二个＆＃34;页面＆＃34;的可见性。

确保你已经在你的页面中包含jQuery库（或者从下面的例子中的CDN中，或者你可以自己下载并使用本地路径），尝试更简单（维护，IMO）之类的东西这样：

＆＃13;

// on DOM-Ready
$(function() {
    // Listen for div.button clicks
    $("div.button").click(function() {
        // Hide any currently visible tabs
        $('div.tab').hide();
        // Get the target tab ID and show it
        $('#' + $(this).data('tab')).show();
    });
});

＆＃13;

 /* You don't need .show anymore */
 .tab {
   display: none;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div>
  <!-- Note the addition of data-tab with the target tab ID -->
  <div id="one" data-tab="home" class="button">One</div>
  <div id="two" data-tab="other" class="button">Two</div>
</div>

<div>
  <!-- note the removal of special class names, using IDs instead -->
  <div class="tab" id="home">
    <h1> Hello </h1>
    <p>This is my amazing page</p>
  </div>

  <div class="tab" id="other">
    <h1> art blah blag </h1>
    <p>This is my amazing page</p>
  </div>
</div>

＆＃13;

如何使用Js单击div并更改其他div的设置

3 个答案: