jQuery addClass example

Change class name on click in jQuery

by jay0727

HTML

<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" type="text/css" href="~/Content/mysheet.css" />
    <title>Second</title>
</head>
<body>
    <div style="width:1130px;">  <!--창의 크기에 따라 내용들이 움직이는걸 막기 위한 div-->
    <div class="header-top">
        <div class="header-left">
            <ul class="SNSLink">
                <li class="facebook"><a target="_blank" href="https://www.facebook.com/goddeveloper/"><b>Facebook</b> 바로가기</a></li>
                <li class="youtube"><a target="_blank" href="https://www.youtube.com/user/vnjenny7"><b>Youtube</b> 바로가기</a></li>
            </ul>
        </div>
        <div class="header-mid"><a href="/Home/Second">Development</a></div>
    </div>

    <div class="menu_container">
        <div id="topMenu">
            <ul class="menu_list" ,>
                <li><a href="/Home/Second" class="menuLink">홈</a></li>
                <li><a href="/Home/Second" class="menuLink">소개</a></li>
                <li><a href="/Home/Second" class="menuLink">갤러리</a></li>
                <li><a href="/Home/Second" class="menuLink">자료실</a></li>
                <li><a href="/Home/Second" class="menuLink">Contact us</a></li>
            </ul>
        </div>
    </div>

    <div class="HomeScreen">
        <div class="MainList">
            <table class="MyTable">
                <thead>
                    <tr>
                        <th>제목</th>
                        <th>내용</th>
                        <th>작성일</th>
                    </tr>
                </thead>
                <tbody id="List">

                </tbody>
            </table>
        </div>
        <input type="button" onclick=alert("사랑해요~") value="띵동~ 누구세요?" />
       <!-- <form action="">
            <textarea></textarea>
            <input type="submit" />
        </form>-->
        <div class="SubList">
        </div>
    </div>
        </div>
    <script src="~/Scripts/jquery-3.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
   ...

CSS

body {
    background-color: seagreen;
   
}

.header-top {
    background-color: grey;
    border-bottom: 1px solid black;
    padding: 4px 0px;
    position:relative;
}

.header-left {
    font-size: 12px;
    font-weight: 100;
    padding-left:1%;
    float: left;
}

.SNSLink {
    list-style: none;
    float: left;
}

.header-mid {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 40px;
    text-align: center;
}

    .header-mid:hover {
        color: black;
    }

.menu_container {
    padding: 0 0 0 0;
    background-color: black;
    color: white;
    font-size: 30px;

}

/*.menu_list{
  margin-left:10%;
  padding-left:0;
  list-style:none;
  vertical-align: middle;
  }*/
a {
text-decoration: none;
color: white;
}

b {
color: skyblue;
}


.HomeScreen {
    margin-top: 10px;
    border: 1px solid;
    border-width: 6px;
    width: 100%;
    height: 700px;
    border-style: double;
    background-color: darkslategrey;
}
.MyTable{
    width:30%;
    height:20px;
    font-size:large;
    background-color:aliceblue;
    margin:6px;
}

table, th, td {
    border: 3px solid black;
    border-collapse: collapse;
}

th, td {
    padding: 5px;
    text-align: left;
}

#topMenu {
    height: 50px;
    width: 100%;
}

#topMenu ul li {
        list-style: none;
        color: white;
        background-color: #2d2d2d;
        float: left;
        line-height: 50px;
        vertical-align: middle;
        text-align: center;
    }

#topMenu .menuLink {
        text-decoration: none;
        color: white;
        display: block;
        width: 210px;
        font-size: 12px;
        font-weight: bold;
        font-family: "Trebuchet MS", Dotum, Arial;
    }

#topMenu .menuLink:hover {
            color: black;
            background-color: #4d4d4d;
        }