0

HTML で navbar を作成し、各 nav 要素に関連する一連のコンテンツが取り込まれた Div もいくつか作成しました。

私がしたいことは、クリックされたときに選択した nav 要素に関連する div を表示し、他の nav 要素に関連する他の div を非表示にすることです。

基本的に、ユーザーが Nav アイテムをクリックしたときに、その nav アイテムのクラスを html で「navItem active on」に設定する必要があります。これが自動的に発生するものかどうかはわかりません。

その後、そのナビゲーション アイテムのコンテンツ パネルの CSS で定義された表示プロパティを「ブロック」に変更する必要があり、他のすべてのコンテンツ パネルの「表示」プロパティを「なし」に変更して、表示されないようにする必要があります。ページで。

与えられた例では、CSS と HTML (機能とチュートリアル) で定義された 2 つのコンテンツ パネルしかありませんが、各 navItem は、クリックされたときにオンに切り替えられる独自のコンテンツ パネルを受け取ります。

どこから始めればいいのか本当にわかりません。これにはJavaScriptが必要だと確信していますが、これは文字通りWebページを構築する最初の試みであり、インスピレーションのために使用した別のWebサイトから多くをコピーした後でも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 -->

4

1 に答える 1

2

これはあなたが望むようなことをするかもしれないと確信しています。これにはもっと洗練されたコードがあります (プラグインがたくさんあることは言うまでもありません)。

$(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") が

この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 のクリック イベントから送信者要素を取得する方法がよくわかりません (ただし、これはグーグルにとってそれほど難しくはないはずです)。<script></script>ブラウザが JavaScript を認識できるようにするには、タグの間にスクリプトを挿入する必要があります。

jQuery を放棄したことで、行数と読みやすさがどのように減少したかに注意してください。

これがお役に立てば幸いです！

また、これがうまくいかない場合は、他の人があなたの質問の下に投稿したリンクをチェックすることをお勧めします.

于 2015-12-23T13:56:04.187 に答える