Q: I want to make my section(contents 1~4) swap when I click each navigation elements. Fisrt, I want to make Home contents is active when I open the website.
other contents should be hidden, Second each content should be link with the navigation element. So when I click the element it should swap the contents with the matched content. If I need to use javascript please let me know.
welcome critics :) and Thank You.   


@font-face {
  font-family: font1;
  src: url('fonts/CaviarDreams.woff');
}
#wrapper {
 margin:0 auto;
 background: white;
 border:1px solid black;
 max-width: 1060px;
}

header {
 max-width: 1060px;
 width: 100%;
 height: 76px;
 top: 0;
 left: 0; 
 border:1px solid black;
}

#logo {
 margin-top: 37px;
 margin-left: 10px;
 float: left;
 width: 160px;
 height: 30px;
 background: url(logo6.png) no-repeat center;
 display: block;
 
}
 
nav {
 float: right;
 margin-top: 27px;
 margin-right: 10px;
 }
 
nav ul {
 list-style: none;
 }
 
nav ul li {
 display: inline-block;
 float: left;
 font-family: font1; 
 font-size: 15px;
 padding: 10px;
 text-decoration: none;
 cursor: pointer;
}

nav ul li:hover {
 color: #6F6F6F;
}

#menu {
 display: hidden;
 width: 40px;
 height: 40px;
 background: url(menu-icon.png) center;
}

#menu:hover {
 background-color: #CBCBCB;
 border-radius: 3px 3px 0 0;
} 

/* MEDIA QUERY */
@media all and (max-width:640px) {
 
 #menu {
  display:inline-block;
  
 }
 nav ul, nav:active ul {
  display: none;
  position: absolute;
  padding: 10px;
  background: #fff;
  border: 3px solid #CBCBCB;
  right: 18px;
  top: 57px;
  width: 30%;
  border-radius: 3px 0 3px 3px;
  z-index: 200;
 }
 nav ul li {
  text-align: center;
  width: 100%;
  margin: 0 auto;
 }
 
 nav:hover ul {
  display: block;
 }
}
#swap{
 margin: 40px auto 40px;
 max-width: 980px;
 position: relative;
 padding: 20px;
 border: 1px solid black;
 z-index:100;
 overflow: hidden;
}

#sns {
 text-align: center;
}
#sns li{
 display: inline-block;
 margin-right: 10px;
}

#copyright li{
 font-family: inherit;
 font-size: 13px;
 text-align: center; 
 list-style: none;
}
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="GalleryResStyle.css">  
</head>
<body>
 <div id="wrapper">
  <header class="header-site" role="banner">
   <a href="#" id="logo"></a>
   <nav>
    <a href="#" id="menu"></a>
    <ul>
     <li>
      Home
     </li>
     <li>
      Profile 
     </li>
     <li>
      Gallery
     </li>
     <li>
      Contact
     </li>
    </ul>
   </nav>
  </header>
  <div id="swap">
   <div id="Home_contents">Home contents</div>
   <div id="Profile_contents">Profile contents</div>
   <div id="Gallery_contents">Gallery Contents</div>
   <div id="Contact_contents">Contact contents</div>
  </div>
  <footer>
   <div id="sns">
   <li>
    <a class="Facebook-icon" href=""><img src="FACEBOOK.png"></a>
   </li>
   <li>
    <a class="instagram-icon" href=""><img src="INSTAGRAM.png"></a>
   </li>
   </div>
   <div id="copyright">
    <li> COPYRIGHT © 2015 INKYU PARK.<br>ALL RIGHTS RESERVED. </li>
   </div>
  </footer>
 </div>
</body>
</html>



A: You will need to use some kind of scripting for this (alternatively just 4 raw html pages).
I'd suggest using bootstrap, it's simple if you're a javascript novice.
<div class="container">
<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#gallery" aria-controls="gallery" role="tab" data-toggle="tab">Gallery</a></li>
    <li role="presentation"><a href="#contact" aria-controls="contact" role="tab" data-toggle="tab">Contact</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Home</div>
    <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
    <div role="tabpanel" class="tab-pane" id="gallery">Gallery</div>
    <div role="tabpanel" class="tab-pane" id="contact">Contact</div>
  </div>

</div>


Above is pulled from getbootstrap.com, fiddle here.

A: Yes you need JavaScript (other languages could do it, but it is the simplest I know)
for example, you can change HTML to (slightly simplified for the sake of clarity):
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <link rel="stylesheet" href="./test.css">
    <!-- Must have this line first, to enable functions in test.js -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Here you get the hide/show functions -->
    <script type="text/javascript" src="./test.js"></script>
</head>
<body>
    <div id="wrapper">
        <header class="header-site" role="banner">
            <a href="#" id="logo"></a>
            <nav>
                <a href="#" id="menu"></a>
                <ul>
                    <li class=showhome>Home</li>
                    <li class=showProfile>Profile</li>
                    <li class=showGallery>Gallery</li>
                    <li class=showContact>Contact</li>
                </ul>
            </nav>
        </header>
        <div id="swap">
            <div id="Home_contents"    class=home    >Home contents</div>
            <div id="Profile_contents" class=Profile >Profile contents</div>
            <div id="Gallery_contents" class=Gallery >Gallery Contents</div>
            <div id="Contact_contents" class=Contact >Contact contents</div>
        </div>
    </div>
</body>
</html>

so you can use class to define which area you click and which area hide/show
then use a js file with a .ready function (in my example, save as test.js in same folder as HTML:
$(document).ready(function(){
    $(".showhome").click(function(){
        $(".home").show();
        $(".Profile").hide();
        $(".Gallery").hide();
        $(".Contact").hide();
    });
    $(".showProfile").click(function(){
        $(".home").hide();
        $(".Profile").show();
        $(".Gallery").hide();
        $(".Contact").hide();
    });
    $(".showGallery").click(function(){
        $(".home").hide();
        $(".Profile").hide();
        $(".Gallery").show();
        $(".Contact").hide();
    });
    $(".showContact").click(function(){
        $(".home").hide();
        $(".Profile").hide();
        $(".Gallery").hide();
        $(".Contact").show();
    });
    // Hide all and show home on page loading
    $(".home").show();
    $(".Profile").hide();
    $(".Gallery").hide();
    $(".Contact").hide();
});

for a cleaner function, you can also use things like $(".home").toggle();, it would switch the state (if it was shown it would hide and vice versa). but I don't see how right now :)
