[Solved] I want to make my section(contents 1~4) swap when I click each navigation elements. [closed]

by


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="https://stackoverflow.com/questions/29768056/./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 🙂

1

solved I want to make my section(contents 1~4) swap when I click each navigation elements. [closed]