いくつかのサイズ変更の後でJquery - クリックをクリックすると変化します

私は基本的なタブナビゲーションを構築しようとしています。タブ上をホバーすると（ステップ）、タブの背景が緑色になります。しかし、ブラウザのいくつかのホバー/サイズ変更後、ホバーはもはや動作しません。次に、緑色の背景を得るためにタブをクリックしなければなりません。一種の凍結。 jsFiddleザッツいくつかのサイズ変更の後でJquery - クリックをクリックすると変化します

：ここhttps://jsfiddle.net/rob_the_mob_87/L84kyym1/

である私の最小限のコード：

index.htmlを

<html> 
    <head> 

    <title>Tabs</title> 

    <script 
     src="https://code.jquery.com/jquery-3.2.1.js" 
     integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
     crossorigin="anonymous"></script> 
    <script type="text/javascript" src="js/static.js"> 
    </script> 

    <link rel="stylesheet" type="text/css" href="./css/main.css"> 
    </head> 

    <body> 
    <div class="process_step active" id="1">Step 1</div> 
    <div class="process_step" id="2">Step 2</div> 
    </body> 
</html>

のmain.css

.process_step{ 

} 

.active{ 
    background-color: green; 
}

static.js

$(document).ready(function() { 
    bindShowStepHandlers() 
}); 

this.bindShowStepHandlers = function() { 
    $('.process_step').each(function() { 
     $(this).hover(function() { 
      var clickedStepId = $(this).attr('id'); 
      openStep(clickedStepId); 
      }); 
     }); 
} 

this.openStep = function (clickedStepId) { 

     $('.process_step').each(function() { 
      var stepId = $(this).attr('id'); 

      if (stepId == clickedStepId) { 
       $(this).addClass('active'); 
      } else { 
       $(this).removeClass('active'); 
      } 
     }); 
}

出典

2017-07-15 rob_87

...それはあなたが何をしたいと思いスニペットやjsfiiddleデモを作成してください。その後、私はあなたを助けることができます –

問題を作成できるコードには何もありませんが、コードを改善することができます。https://jsfiddle.net/L84kyym1/1/ – Satpal

私のためにうまく動作するようです。 –

下記の内容を確認してください。私は

$(document).ready(function() { 
 
    bindShowStepHandlers() 
 
}); 
 

 
this.bindShowStepHandlers = function() { 
 
    $('.process_step').each(function() { 
 
    $(this).on('mouseenter',function() { 
 
     $(this).addClass('active'); 
 
    }); 
 
    $(this).on('mouseleave',function() { 
 
    $(this).removeClass('active'); 
 
     
 
    }); 
 
    }); 
 
}

.process_step {} 
 

 
.active { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="process_step active" id="1">Step 1</div> 
 
    <div class="process_step" id="2">Step 2</div>

出典

2017-07-15 10:54:02

いくつかのサイズ変更の後でJquery - クリックをクリックすると変化します

答えて

関連する問題