在导航元素上显示Div并单击并隐藏其他Div

Question

I built a navbar in HTML and also some Divs which are populated with a bunch of content that pertains to each nav element.

What I want to do is show the div which pertains to the selected nav element when it is clicked and hide the other divs that pertain to the other nav elements.

Basically what needs to happen is when a user clicks on a Nav Item, the class for that nav item needs to be set to 'navItem active on' in the html. Not sure if this is something that happens automatically or not.

After that, the display property defined in the CSS for the content panel of that nav item needs to be changed to 'block' and all other content panels should then have their 'display' property changed to 'none' so that they are not displayed in the page.

In the example given, I only have two content panels defined in the CSS and HTML (Capabilities and Tutorials), but each navItem will receive it's own content panel which should be toggled on when it is clicked.

I really have no idea where to begin with this. I'm pretty sure this requires JavaScript but this is literally my first attempt at building a web page and it took me 2 days even after copying a lot from another website I used for inspiration. Any help, guidance or insight is greatly appreciated.

CSS + HTML:

 var links = document.getElementsByClassName("navItem"); for (i = 0; i < links.length; i++) { var link = links[i]; link.addEventListener('click',function(sender, event) { event.preventDefault(); /* hide all panels */ var panels = document.getElementsByClassName("panel"); for (j = 0; j < panels.length; j++) { panels[j].style.display = 'none'; } /* Show the selected panel */ var panel_id = sender.target.getAttribute("panel-id"); document.getElementById(panel_id).style.display = 'block'; } } 

 /* FONT ASSIGNMENTS --------------------------- */ /* General Use */ a { text-decoration: none; } a:hover { text-decoration: underline; } p, small { font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif; } p.large-text { font-size: 18px !important; } hr { background-color: #e0e0e0; color: #e0e0e0; } .center-content { text-align: center !important; } /* Special Use */ h1, h2, h1 a, h2 a, h3, h3 a, infoBar, .gisFont1, .gisFont1 a { font-weight: normal !important; font-style: normal; line-height: normal; font-variant: normal; font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif; } /*-- END FONT ASSIGNMENTS --*/ /* INFOBAR - The Infobar is the navigation element at the top used to navigate the subpages of the document and change the content panel's content depending on the selected infoBar navigation element --------------------------- */ /* infoBar Bottom Border */ #infoBar { background: #FFF; /*border-top: 1px solid #e5e5e5;*/ border-bottom: 1px solid #e5e5e5; max-width: 940px; text-align: center; /*display: table;*/ margin: 0 auto; } /* infoBar Bottom Border onHover or Active element*/ #infoBar a:hover, #infoBar a.active { border-bottom: 4px solid #2889DE; text-decoration: none; } /* infoBar Link Text */ #infoBar a { background: transparent; color: #000; display: inline-block; font-size: 16px; font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif; padding: 1.4em; text-decoration: none; } /* infoBar Link Text onHover */ #infoBar a:Hover { background: transparent; color: #2889DE; display: inline-block; font-size: 16px; font-family: 'Avenir LT W01 35 Light', Arial, Helvetica, sans-serif; padding: 1.4em; text-decoration: none; } /* infoBar Active element */ #infoBar a.active { font-family: 'Avenir LT W01 65 Medium', Arial, Helvetica, sans-serif; } /* Media Queries */ @media screen and (max-width: 960px) { #infoBar a { font-size: 14px; } } @media screen and (max-width: 830px) { #infoBar a { padding: 1em 0.6em; } } @media screen and (max-width: 760px) { #infoBar { display: none; } } /*-- END INFOBAR --*/ /* PAGE SECTIONS --------------------------- */ /* Page Section Styling */ .page-section { background-position: center top; color: #4d4d4d; min-height: 200px; padding: 60px 0; text-align: center; width: 940px; margin: auto; } /* Page Section - Header2 Styling */ .page-section h2 { font-size: 24px; margin-bottom: 20px; } /* Page Section Paragraph Styling */ .page-section p { color: #333; font-size: 18px; line-height: 1.5; /*margin: 10px 0 45px 0;*/ } /* Foreword-Section-Top Styling */ .foreword-section-top { padding: 0; min-height: 160px; } /* Foreword-Section-Top Header1 Styling*/ .foreword-section-top h1 { color: #222; font-size: 36px; } /* Foreword-Section-Top Paragraph Styling */ .foreword-section-top p { color: #4d4d4d; margin-bottom: 10px; } .grid-100 { width: 100%; margin: auto; } /* CONTENT PANELS ----------------------------- */ /* Capabilties Panel*/ #capabilities-panel { max-width: 980px; margin: 0 auto; display:block; } /*Tutorials Panel */ #tutorials-panel { max-width: 980px; margin: 0 auto; display:none; } .product-row { margin-bottom: 50px; /*width: 100%; */ max-width: 940px; margin: 0 auto; display: inline-block; } .product-box { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); float: left; overflow: hidden; margin: 0.5%; position: relative; text-align: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); width: 24%; } @media screen and (max-width: 960px) { .product-box { width: 48%; } } @media screen and (max-width: 480px) { .product-box { display: block; float: none; margin: 10px auto; width: 95%; } } .product-box a { color: #FFF; display: block; font-weight: bold; } .product-box a:hover .inner-box-padding { position: relative; width: 100%; -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .product-box .inner-box-padding { background-color: #007ac2; background-position: center center; background-repeat: no-repeat; background-size: cover; -ms-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; width: 100%; } .product-box .inner-box-padding:before { content: ""; display: block; padding-top: 87%; } .product-box h3 { font-size: 22px; color: #FFF; position: absolute; left: 0; right: 0; bottom: 0; } .product-box.dark-text h3 { color: #333; } .product-box .capability-one { background-image: url('http://i64.tinypic.com/2mi16l1.png'); } .product-box .capability-two { background-image: url('http://i68.tinypic.com/10gwm75.png'); } .product-box .capability-three { background-image: url('http://i65.tinypic.com/5djxwh.png'); } .product-box .capability-four { background-image: url('http://i67.tinypic.com/15e7hu8.png'); } .product-box .tutorial-one { background-image: url('http://i68.tinypic.com/efhvfc.png'); } .product-box .tutorial-two { background-image: url('http://i66.tinypic.com/50199u.png'); } .product-box .tutorial-three { background-image: url('http://i63.tinypic.com/wvwcif.png'); } .product-box .tutorial-four { background-image: url('http://i67.tinypic.com/1zp1or8.png'); } /* END PRODUCT BOXES */ 

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!-- include jQuery --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <!-- INFO BAR --> <div id="infoBar"> <a href="/intro/capabilities" class="navItem active on" panel-id="capabilities-panel">Capabilities</a> <a href="/intro/tutorials" class="navItem" panel-id="tutorials-panel">Tutorials</a> <a href="/intro/use-cases" class="navItem">Use Cases</a> <a href="/intro/services" class="navItem">Services</a> <a href="/intro/security" class="navItem">Security</a> <a href="/intro/whats-new" class="navItem">What's New</a> <a href="/intro/request-access" class="navItem">Request Access</a> </div> <!-- END GIS INFO BAR --> <!-- FOREWORD --> <div class="page-section foreword-section-top"> <h1>Some Cool Tagline</h1> <p>blah blah blah. We're so awesome. Now give us money.</p> </div> <!-- CAPABILITIES PANEL --> <div id="capabilities-panel" class="panel"> <!-- Capability One --> <div class="product-box"> <a href="/capabilities/capability-one"> <div class="inner-box-padding capability-one"></div> <h3>Capability 1</h3> </a> </div> <!-- Capability Two box --> <div class="product-box dark-text"> <a href="/capabilities/capability-two"> <div class="inner-box-padding capability-two"></div> <h3>Capability 2</h3> </a> </div> <!-- Capability Three box --> <div class="product-box"> <a href="/capabilities/capability-three"> <div class="inner-box-padding capability-three"></div> <h3>Capability 3</h3> </a> </div> <!-- Capability Four box --> <div class="product-box"> <a href="/capabilities/capability-four"> <div class="inner-box-padding capability-four"></div> <h3>Capability 4</h3> </a> </div> </div> <!-- END CAPABILITIES PANEL --> <!-- TUTORIALS PANEL --> <div id="tutorials-panel" class="panel"> <!-- Tutorial One box --> <div class="product-box"> <a href="/tutorials/tutorial-one"> <div class="inner-box-padding tutorial-one"></div> <h3>Tutorial 1</h3> </a> </div> <!-- Tutorial Two box --> <div class="product-box dark-text"> <a href="/tutorials/tutorial-two"> <div class="inner-box-padding tutorial-two"></div> <h3>Tutorial 2</h3> </a> </div> <!-- Tutorial Three box --> <div class="product-box"> <a href="/tutorials/tutorial-three"> <div class="inner-box-padding tutorial-three"></div> <h3>Tutorial 3</h3> </a> </div> <!-- Tutorial Four box --> <div class="product-box"> <a href="/tutorials/tutorial-four"> <div class="inner-box-padding tutorial-four"></div> <h3>Tutorial 3</h3> </a> </div> </div> <!-- END TUTORIALS PANEL --> 

Answer 1

Pretty sure that this might do something like you'd want. There are more elegant pieces of code (not to mention that there should be loads of plugins) for this though, this is just out of the top of my head (dont use $.attr to find the corresponding panel etc).

$(document).ready(function(){
    $(".navItem").click(function(event) {
        event.preventDefault();

        $('.navItem').removeClass("active").removeClass("on");
        $(this).addClass("active").addClass("on");
        var panel = $(this).attr('panel-id');

        $(".panel").hide();
        $("#"+panel).show();
    });
});

In order to use this script you need to import jQuery into your page though, which literally putting 1 line in your page (just google that).

You need to give every panel the class panel (ie instead of just the 'id' attribute. This will allow for the $(".panel") to find all html that is in a

The var panel = $(this).attr('panel-id'); line finds the panel belonging to the anchor the user clicked, as long as you add an attribute to each anchor containing the id of the corresponding panel as the value (eg <a (..) panel-id="capabilities-panel"> )

=======

Updated answer so OP can use vanilla javascript per his request.

   (function () {
        alert('hello');
        var links = document.getElementsByClassName("navItem");
        for (i = 0; i < links.length; i++) {
            var link = links[i];
            link.addEventListener('click',function(event) {
                event.preventDefault();

                for(int k = 0; k < links; k++) {
                    links[k].className = "navItem";
                }
                event.target.className += " active on";


                var panels = document.getElementsByClassName("panel");
                for (j = 0; j < panels.length; j++) {
                    panels[j].style.display = 'none';
                }
                var panel_id = event.target.getAttribute("panel-id");
                document.getElementById(panel_id).style.display = 'block';
            });
        }
    })();

I haven't tested this so there's probably some syntactic errors here and there, and Im not too sure how one gets the sender element from a click event in vanilla javascript (though this shouldn't be too hard to google). You need to put scripts in between <script></script> tags in order for your browser to recognize javascript.

Note how the number of lines and readability decreased by abandoning jQuery.

Hope this helps you!

Also, if this is just not working for you I recommend checking out the link the other guy posted under your question.