2016-08-20 38 views
0

jqueryのかなり初心者です。私はnavbarと私が選択したものに基づいて自分のタグを変更しようとしている。 h1タグはjquery .html()によって変更されません。

$(document).ready(function() { 
 
\t $('a').click(function(){ 
 
\t the = $(this).html(); 
 
\t linkvalue = $(this).attr('data-link'); 
 
\t $('#whatItIs').html(the); 
 
\t console.log(the); 
 
\t console.log(linkvalue); 
 
\t 
 

 
\t switch(the) { 
 
\t  case "Steel Products": 
 
\t  \t { \t 
 
\t \t  \t window.location.href = linkvalue; 
 
\t \t   break; 
 
\t  \t } 
 
\t  case "Steel Doors": 
 
\t   { \t 
 
\t   \t 
 
\t   \t window.location.href = linkvalue;  
 
\t \t   break; 
 
\t  \t } 
 
\t  case "Digital Safes": 
 
\t  \t { 
 
\t \t   
 
\t \t   window.location.href = linkvalue; 
 
\t \t   break; 
 
\t  \t } 
 
\t  case "Security Equipment": 
 
\t  \t { 
 
\t \t \t \t 
 
\t \t   window.location.href = linkvalue; 
 
\t \t   break; 
 
\t  \t } \t 
 
\t  case "Storage Solutions": 
 
\t  \t { 
 
\t  \t \t 
 
\t \t   window.location.href = linkvalue; 
 
\t \t   break; 
 
\t  \t } 
 
\t  case "Steel Furniture": 
 
\t  \t { 
 
\t \t   
 
\t \t   window.location.href = linkvalue; 
 
\t \t   break;  
 
\t   }   
 
\t  default: 
 
\t  { 
 
\t   console.log("Not Found"); 
 
\t   //window.location.href = "404.html"; 
 
\t  } 
 
\t } 
 
\t }); 
 
});
<li class="dropdown" class="active"> 
 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Manufactured Products <b class="caret"></b></a> 
 
         <ul class="dropdown-menu"> 
 
          <li> 
 
           <a data-link="securityEquipment.html">Steel Products</a> 
 
          </li> 
 
          <li> 
 
           <a data-link="securityEquipment.html">Steel Doors</a> 
 
          </li> 
 
          <li > 
 
           <a data-link="securityEquipment.html">Digital Safes</a> 
 
          </li > 
 
          <li> 
 
           <a data-link="securityEquipment.html">Security Equipment</a> 
 
          </li> 
 
          <li > 
 
           <a data-link="securityEquipment.html">Storage Solutions</a> 
 
          </li> 
 
          <li> 
 
           <a data-link ="securityEquipment.html">Steel Furniture</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 

 
<h1 class="page-header" id="whatItIs"> 
 
       Untitled 
 
<!--      <small>Subheading</small> 
 
-->    </h1>

問題は、その後のH1だけ第二の変更とバック私はそれが設定されている元に変化することです。 これはかなりシンプルなようです。私は間違って何をしているのか分かりません

+2

それはですあなたはクリックしません。 –

+0

リンクで通常のhref属性を使用してみませんか?あなたは通常のブラウザの動作を複製しているようです。 – jedifans

+0

@jedifans私はこれ以上の機能を実装する必要があります。私はその部分に慣れていない。私はこの作業を得ることができない – spetiwala

答えて

0

h1の内容をリスト内のクリックされたリンクの内容に変更したい場合は、リンクのtext()をクリックするだけで変数に保存することができます。それにh1を更新:

$('.dropdown-menu a').on('click', function(e){ 
 
    e.preventDefault(); 
 
    var title = $(this).text(); 
 
    $('#whatItIs').text(title); 
 
});
.dropdown-menu a { cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="dropdown" class="active"> 
 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Manufactured Products <b class="caret"></b></a> 
 
    <ul class="dropdown-menu"> 
 
    <li><a data-link="securityEquipment.html">Steel Products</a></li> 
 
    <li><a data-link="securityEquipment.html">Steel Doors</a></li> 
 
    <li><a data-link="securityEquipment.html">Digital Safes</a></li> 
 
    <li><a data-link="securityEquipment.html">Security Equipment</a></li> 
 
    <li><a data-link="securityEquipment.html">Storage Solutions</a></li> 
 
    <li><a data-link="securityEquipment.html">Steel Furniture</a></li> 
 
    </ul> 
 
</li> 
 
<h1 class="page-header" id="whatItIs">Untitled</h1>

jsFiddle:あなたは、各リンクの股関節に新しいページをロードしているのでhttps://jsfiddle.net/azizn/ajqLu9vy/

+0

これは、テキストエディタとgoogle chromeで動作しないようです。また、.dropdown-menuとは何か?{cursor:pointer; }あなたは使っていますか? – spetiwala

+0

カーソルはオプションです。 'href'属性を持たない' a'タグはポインタカーソルを取得しないので、アイテムがクリック可能であることを知らせるためだけに追加しました。コンソールのエラーをチェックできますか? – Aziz

関連する問題