Question

我试着按照这个演示https://www.youtube.com/watch?v=PP3x4crHBog但我无法命名相同的原因，因为我已经将其他选项卡命名为，所以我稍微更改了变量名称，并将外观和所有内容格式化，但每当我点击登录按钮，显示屏没有显示登录表单....我做错了什么？

$('.tabs a').on('click', function (e) {
              alert("in");
              e.preventDefault();

              $(this).parent().addClass('active');
              $(this).parent().siblings().removeClass('active');

              target = $(this).attr('href');

              $('.tabs-content > div').not(target).hide();
              $(target).fadeIn(600);
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class='forms'>
            <ul class='tabs-group'>
                <li class='tabs active'><a href="#signUp">Sign Up</a></li>
                <li class='tabs'><a href="#login">Login</a></li>
            </ul>

            <div class='tabs-content'>
                <div id='signUp'>
                    <h2 id='regTitle'>Register an account to get started!</h2>
                    <form id='regForm' name='regForm' method='POST' action='<?= BASE_URL ?>register/' style='display:block;'>
                        <table>
                            <tr>
                                <td><label for='regUsername'>Username</label></td>
                                <td><input id='regUsername' name='regUsername' type='text'></td>
                            </tr>
                            <tr>
                                <td><label for='regEmail'>Email</label></td>
                                <td><input id='regEmail' name='regEmail' type='email'></td>
                            </tr>
                            <tr>
                                <td><label for='regPassword'>Password</label></td>
                                <td><input id='regPassword' name='regPassword' type='password'></td>
                            </tr>
                        </table>
                      <input type="submit" value="Register" style='margin:10px;'>
                    </form>
                </div>
                <div id='login'>
                    <h2 id='loginTitle'>Welcome Back!</h2>
                    <form method="POST" action="<?= BASE_URL ?>login/">
                        <input type='text' id='username' name='username' placeholder='Username'>
                        <input type='password' id='password' name='password' placeholder='Password'>
                        <input type='submit' name='submit' value='Sign In'>
                    </form>
                </div>
            </div>
        </div>

Answer 1

https://jsfiddle.net/mhnaw7kv是一个很好的答案。它有效，是的，所以如果遇到任何新问题，只需创建一个新问题，我就会回答。

//I have nothing to say

只需确保在代码的<head>标记中声明jQuery，当前版本为<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>。

另外，只需快速说明，当您声明<script>时，您就不必放<script type="text/javascript">。即使声明了jQuery，Javascript也已在<script>函数中声明。

选项卡单击不起作用

1 个答案: