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

Question

我在 HTML 中构建了一个导航栏，还构建了一些包含与每个导航元素相关的大量内容的 Div。

我想要做的是在单击时显示与所选导航元素相关的 div，并隐藏与其他导航元素相关的其他 div。

基本上需要发生的事情是，当用户单击导航项时，该导航项的 class 需要在 html 中设置为 'navItem active on'。不确定这是否是自动发生的事情。

之后，在 CSS 中为该导航项的内容面板定义的显示属性需要更改为 'block'，然后所有其他内容面板都应该有自己的'display' 属性更改为 'none' 以便它们不会显示在页面中。

在给出的示例中，我只在 CSS 和 HTML（功能和教程）中定义了两个内容面板，但是每个导航项都会收到自己的内容面板，应该将其打开当它被点击时。

我真的不知道从哪里开始。我很确定这需要 JavaScript 但这实际上是我第一次尝试构建网页，即使从另一个我用来获取灵感的网站上复制了很多内容，我也花了 2 天的时间。非常感谢任何帮助、指导或见解。

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

很确定这可能会做您想要的事情。虽然有更多优雅的代码片段（更不用说应该有大量的插件），但这只是我的头脑（不要使用 $.attr 来查找相应的面板等）。

$(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();
    });
});

为了使用此脚本，您需要将 jQuery 导入您的页面，这实际上是在您的页面中放置 1 行（只是 google）。

您需要为每个面板提供 class 面板（即不仅仅是 'id' 属性。这将允许 $(".panel") 找到所有 html 那是在一个

var panel = $(this).attr('panel-id');行查找属于用户点击的锚点的面板，只要给每个锚点添加一个属性，包含相应面板的id作为值（例如<a (..) panel-id="capabilities-panel"> )

=======

更新了答案，以便 OP 可以根据他的要求使用香草 javascript。

   (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';
            });
        }
    })();

我还没有对此进行测试，所以这里和那里可能存在一些语法错误，而且我不太确定如何从香草 javascript 中的点击事件中获取发件人元素（尽管这不应该是太难 google)。您需要将脚本放在 <script></script> 标记之间，以便浏览器识别 javascript.

请注意放弃 jQuery 后行数和可读性如何下降。

希望对您有所帮助！

此外，如果这对您不起作用，我建议您查看 link 其他人在您的问题下发布的帖子。

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

Show Div on Nav Element Click and Hide Other Divs

html

javascript

css

display

更新了答案，以便 OP 可以根据他的要求使用香草 javascript。