.setAttribute未正确隐藏。 HTML / CSS

时间:2019-11-12 20:24:38

标签: html css

 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>

当我单击查看配置文件/编辑配置文件的链接时,该链接不会显示或隐藏其他配置文件,而我却只能看到同一屏幕。感谢您的帮助,我已经尝试扫描其他帖子,但据我所知,没有帮助。

此外,这是hide类的CSS。

div.hide {
display: none;}

form.hide {
display: none;}

1 个答案:

答案 0 :(得分:0)

您可以尝试

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

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