编辑：

Question

我有一个包含不同面板的页面，以及一个使用jQuery显示/隐藏它们的函数。我已经调试了几个小时，但仍然无法弄清楚是什么错误。

JAVASCRIPT：

function toTab(curtab,tname){
console.log('toTab: '+curtab+', '+tname);
$('div.panel#'+curtab).attr('hidden','hidden');
$('div.panel#'+tname).removeAttr('hidden');
};

HTML：

<div class='panel' id='main'>
<div id='rafosd'><h1 id='rafos'>
    RafOS<em class='flashing'>_</em>
    </h1></div>
    <a id='mainl' class='panelchange' href='javascript:toTab("main","signin");'><!-- !!! JS FUNCTION CALLED HERE! !!! !-->Sign in</a>
    <script>
        setInterval(function() {
            $('.flashing').toggleClass('hide');
        }, 500);
    </script>
</div>
<!-- !-->
<div class='panel' hidden id='signin'>
<div style="display:table;">
  <div style="display:table-cell;vertical-align:middle;">
<form id='fsignin' style="margin-left:auto;margin-right:auto;" method='post' action='api/signin.php'>
<h1>Sign in</h1>
<h3 style="color: rgba(165, 165, 165, 1)">&mdash; Control your games remotely &mdash;</h3>
<input type='text' class='input' required placeholder='Username' autocomplete='off' name='username' id='signin-username'>
<br>
<input type='password' class='input' required placeholder='Password' name='password' autocomplete='off' id='signin-password'>
<br>
<input type='submit' class='button' name='submit' id='signin-submit' value='SIGN IN'><br>
Don&apos;t have an account? <strong><a id='signin' class='panelchange' href='javascript:toTab("signin","signup");'><!-- !!! JS FUNCTION CALLED HERE! !!! !-->Sign up</a></strong>
</form>
  </div>
</div>
</div>
<!-- !-->
<div class='panel' hidden id='signup'>
<div style="display:table;">
  <div style="display:table-cell;vertical-align:middle;">
<form id='fsignup' style="margin-left:auto;margin-right:auto;" method='post' action='api/signup.php'>
<h1>Sign up</h1>
<h3 style="color: rgba(165, 165, 165, 1)">&mdash; Control your games remotely &mdash;</h3>
<input type='text' class='input' placeholder='Username' autocomplete='off' name='username' id='signup-username'>
<br>
<input type='password' class='input' placeholder='Password' name='password' autocomplete='off' id='signup-password'>
<br>
<input type='submit' class='button' name='submit' id='signup-submit' value='SIGN UP'><br>
Already have an account? <strong><a id='signup' class='panelchange' href='javascript:toTab("signup","signin");'><!-- !!! JS FUNCTION CALLED HERE! !!! !-->Sign in</a></strong>
</form>
  </div>
</div>
</div>

注意：

如果代码太多而您无法理解，或者只想查看部分/全部代码，那么页面现场直播here。

如果您不了解某些内容，请发表评论，我会尽力解释。

编辑：

现在工作正常，感谢Sean和slightlynybbled

Answer 1

您有两个名为toTab的函数，两个函数都包含在内。一个是在线：

function toTab(curtab,tname){
console.log('toTab: '+curtab+', '+tname);
$('div.panel#'+curtab).attr('hidden','hidden');
$('div.panel#'+tname).removeAttr('hidden');
};

和main.js中的一个：

function toTab(curtab,tname){
$('div.panel#'+curtab).animate({
   opacity: 0,
})
$('div.panel#'+tname).animate({
   opacity: 1,
})
}

后者修改了不透明度，前者具有隐藏属性的修饰，你确定你不想将它们组合起来，它们可能是冲突的。

Answer 2

您的选择器不正确。您需要在班级panel和ID。

之间留出空格

此

$('div.panel#'+curtab).attr('hidden','hidden');
$('div.panel#'+tname).removeAttr('hidden');

需要

$('div.panel #'+curtab).attr('hidden','hidden');
$('div.panel #'+tname).removeAttr('hidden');

为什么我的html / js代码不起作用？

注意：

编辑：

2 个答案: