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

Question

我在HTML中构建了一个导航栏，还有一些Divs，其中填充了大量与每个nav元素相关的内容。

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

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

之后，需要将该导航项的内容面板的CSS中定义的显示属性更改为“阻止”，然后所有其他内容面板的“显示”属性应更改为“无”，以便它们不会显示在页面中。

在给出的示例中，我只在CSS和HTML（功能和教程）中定义了两个内容面板，但每个navItem将接收它自己的内容面板，单击该面板时应该切换。

我真的不知道从哪里开始。我很确定这需要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）。

您需要为每个面板提供类面板（即，而不仅仅是'id'属性。这将允许$（“。panel”）查找所有的html

var panel = $(this).attr('panel-id');行找到属于用户点击的锚点的面板，只要您为包含相应面板的id的每个锚点添加属性作为值（例如{{1 }}）

=======

更新了答案，因此OP可以根据他的请求使用vanilla javascript。

<a (..) panel-id="capabilities-panel">

我没有对此进行测试，因此可能存在一些语法错误，我不太确定如何从vanilla javascript中的click事件中获取sender元素（尽管这不应该太难以谷歌）。 您需要在 (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。

注意放弃jQuery会减少行数和可读性。

希望这能帮到你！

此外，如果这对您不起作用，我建议您查看您提出的其他人发布的链接。