Question

我在jQuery中编写了以下函数来执行此操作：

jQuery(document).ready(function($) {
    tab = $('.tabs h3 a');
    tab.on('click', function(event) {
        event.preventDefault();
        tab.removeClass('active');
        $(this).addClass('active');

        tab_content = $(this).attr('href');
    //  $('div[id$="tab-content"]').removeClass('active');
        $('div[id$="tab-content"]').removeClass('active');
        $(tab_content).addClass('active');
    });
});

我用HTML编写的两个代码是：

< div class="form-wrap">

    <div class="tabs">
        <h3 class="signup-tab"><a href="#signup-tab-content" onclick="test()">Sign Up</a></h3>
        <h3 class="login-tab"><a  class="active" href="#login-tab-content">Login</a></h3>
    </div>

    <div class="tabs-content">

        <div id="signup-tab-content">
            <form class="signup-form" action="" method="post">
                <input type="email" class="input" placeholder="Enter Email" required>
                <input type="text" class="input" placeholder="Enter Username" required>
                <input type="password" class="input" placeholder="Enter Password" required>
                <input type="submit" class="button" value="Sign Up">
            </form>
        </div>

        <div id="login-tab-content"  class="active">
            <form class="login-form" action="" method="post">
                <input type="text" class="input" placeholder="Enter Email or Username" required>
                <input type="password" class="input" placeholder="Enter Password" required>
                <input type="submit" class="button" value="Login">
            </form>
            <div class="bottom-text">
                <p><a href="#">Forget your password?</a></p>
            </div>
        </div>

    </div>

当用户点击注册时，我需要显示注册标签内容，当用户点击登录时，它将显示登录标签内容。但它不起作用，请给我一个解决方案，我是jQuery的新手....

Answer 1

老实说，如果是我，我会静态地为两个h3链接分配动作。这让我更容易确切知道发生了什么。

＆＃13;

jQuery(document).ready(function($) {

  // could probably create an id instead of a class too for these
  $('.signup-tab').click(function() {
    $('#signup-tab-content').show();
    $('#login-tab-content').hide();
  });
  $('.login-tab').click(function() {
    $('#signup-tab-content').hide();
    $('#login-tab-content').show();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="form-wrap">
  <div class="tabs">
    <h3 class="signup-tab"><a href="#signup-tab-content">Sign Up</a></h3>
    <h3 class="login-tab"><a class="active" href="#login-tab-content">Login</a></h3>
  </div>

  <div class="tabs-content">

    <div id="signup-tab-content" style="display:none">
      <form class="signup-form" action="" method="post">
        <input type="email" class="input" placeholder="Enter Email" required>
        <input type="text" class="input" placeholder="Enter Username" required>
        <input type="password" class="input" placeholder="Enter Password" required>
        <input type="submit" class="button" value="Sign Up">
      </form>
    </div>

    <div id="login-tab-content" class="active">
      <form class="login-form" action="" method="post">
        <input type="text" class="input" placeholder="Enter Email or Username" required>
        <input type="password" class="input" placeholder="Enter Password" required>
        <input type="submit" class="button" value="Login">
      </form>
      <div class="bottom-text">
        <p><a href="#">Forget your password?</a></p>
      </div>
    </div>
  </div>
</div>

＆＃13;

我遗漏了.active类的东西，因为在没有css的情况下，它目前还不清楚它在做什么。一旦我们可以看到它应该做什么，我们就可以从必要的元素中添加/删除类。

在HTML中如何使用jQuery使类活动和活动？

1 个答案: