html - .setAttribute 没有正确隐藏。 HTML/CSS

Question

 function displayEditProfileStudent() {
        document,getElementById('editstudentprofile').setAttribute('class', 'unhide');
        document.getElementById('profile_viewStudent').setAttribute('class', 'hide');
        document.getElementById('ViewStudent').setAttribute('class', 'unhide');
    }
    function displayProfileViewStudent() {
        document,getElementById('editstudentprofile').setAttribute('class', 'hide');
        document.getElementById('profile_viewStudent').setAttribute('class', 'unhide');
        document.getElementById('ViewStudent').setAttribute('class', 'unhide');
    }

<div id="ViewStudent" class="hide">
            <a href="#ViewProfileStudent" class="student_profile_view col-sm-1" onclick= "displayProfileViewStudent()" >View Profile</a>
            <a href="#EditProfileStudent" class="student_profile_edit col-sm-1" onclick="displayEditProfileStudent()">Edit Profile</a>
            <form id="editstudentprofile" class="hide">
                <h4>Edit Profile</h4>
                <label class="col-sm-3">Major:</label>
                <input class="major_input col-sm-5" name="studentmajor" type="text" placeholder="Enter your Major">
                <br/>
                <label class="col-sm-3">Cumulative GPA:</label>
                <input class="GPA_input col-sm-1" name="studentGPA" type="text" placeholder="GPA">
                <br/>
                <label class="col-sm-3">Expected Graduation Date:</label>
                <input class="graduation_input col-sm-2" name="studentgraduationdate" type="text" placeholder="MM/DD/YYYY">
                <br/>
                <label class="col-sm-3">Have you served as a TA before?</label><br/>
                <input class="previousTA_input" name="previousTA" type="radio"> Yes<br/>
                <input class="previousTA_input" name="previousTA" type="radio"> No<br/>
                <a href="#EditProfileStudent" class="editaccount_btn btn btn-default" >Update Profile</a>
            </form>
            <div id="profile_viewStudent" class="hide">
                <h4>Profile</h4>
            </div>
        </div>

当我单击查看个人资料/编辑个人资料的链接时，它不会显示或隐藏另一个，我看到的是同一个屏幕。感谢您提供任何帮助，我尝试浏览其他帖子，据我所知，目前还没有任何帮助。

此外，这是隐藏类的 CSS。

div.hide {
display: none;}

form.hide {
display: none;}

Answer 1

你可以试试

document.getElementById('editstudentprofile').classList.add('unhide');
document.getElementById('editstudentprofile').classList.remove('hide');

此外，在您的示例中，您使用 , 而不是 . 在两行 document 之后。