web-dev-qa-db-fra.com

comment passer cet élément à la fonction javascript onclick et ajouter une classe à cet élément cliqué

J'ai eu un code de navigation html comme ci-dessous

function Data(string) {
  //1. get some data from server according to month year etc.,
  //2. unactive all the remaining li's and make the current clicked element active by adding "active" class to the element
  $('.filter').removeClass('active');
  $(this).addClass('active');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="padding-left:21px;">
  <ul class="nav nav-tabs" style="padding-left:40px;">
    <li class="active filter"><a href="#month" onclick="Data('month')">This Month</a></li>
    <li class="filter"><a href="#year" onclick="Data('year')">Year</a></li>
    <li class="filter"><a href="#last60" onclick="Data('last60')">60 Days</a></li>
    <li class="filter"><a href="#last90" onclick="Data('last90')">90 Days</a></li>
  </ul>
</div>

donc, à partir du code ci-dessus, ce que j'essaie de faire est que, lorsque l'utilisateur clique sur l'un des onglets, tous les onglets restants doivent être inactifs et l'élément/onglet en cours doit être actif, mais le code ci-dessus ne fonctionne pas. pouvez-vous me faire savoir comment faire fonctionner le code ci-dessus, y a-t-il de toute façon que nous pouvons envoyer l'objet this (actuel) lorsque l'utilisateur clique sur l'onglet, parce que je veux utiliser uniquement javascript onclick pour cela?

javascriptjqueryhtmlonclick
53
Shiva Krishna Bavandla

Utilisez ce html pour obtenir l'élément cliqué: -

<div class="row" style="padding-left:21px;">
            <ul class="nav nav-tabs" style="padding-left:40px;">
                <li class="active filter"><a href="#month" onclick="Data('month', this)">This Month</a></li>
                <li class="filter"><a href="#year" onclick="Data('year', this)">Year</a></li>
                <li class="filter"><a href="#last60" onclick="Data('last60', this)">60 Days</a></li>
                <li class="filter"><a href="#last90" onclick="Data('last90', this)">90 Days</a></li>
            </ul> 

        </div>

Scénario:-

 function Data(string, el)
            {
                $('.filter').removeClass('active');
                $(el).parent().addClass('active') ;
            }
72
Sujata Chanda

Vous pouvez utiliser addEventListener pour passer this à une fonction JavaScript.

HTML

<button id="button">Year</button>

JavaScript 

(function () {
    var btn = document.getElementById('button');
    btn.addEventListener('click', function () {
        Date('#year');
    }, false);
})();

 function Data(string)
          {
                $('.filter').removeClass('active');
                $(this).parent().addClass('active') ;
          }
3
Naman

Essayez comme

<script>
function Data(string)
{      
  $('.filter').removeClass('active');
  $(this).parent('.filter').addClass('active') ;
} 
</script>

Pour le sélecteur de classe, vous devez utiliser . avant le classname et ajouter la classe au parent . Parce que vous cliquez sur la balise d'ancrage et non sur la filter.

1
Gautam3164
<div class="row" style="padding-left:21px;">
    <ul class="nav nav-tabs" style="padding-left:40px;">
        <li class="active filter"><a href="#month" onclick="Data(this)">This Month</a></li>
        <li class="filter"><a href="#year" onclick="Data(this)">Year</a></li>
        <li class="filter"><a href="#last60" onclick="Data(this)">60 Days</a></li>
        <li class="filter"><a href="#last90" onclick="Data(this)">90 Days</a></li>
    </ul>

</div>

<script>
    function Data(element)
    {     
       element.removeClass('active');
       element.addClass('active') ;
    }
</script>
1
Vicky Gonsalves

Vous avez manqué un point:

<script>
  function Data(string)
    {
      //1. get some data from server according to month year etc.,
      //2. unactive all the remaining li's and make the current clicked element active by adding "active" class to the element
      $('.filter').removeClass('active');
      $(this).addClass('active') ;
    } 
</script>
0
Miquel Las Heras

Votre code présente deux problèmes. Tout d’abord, vous avez besoin d’une référence pour capturer l’élément au clic. Essayez d'ajouter un autre paramètre à votre fonction pour référencer cela. La classe active est également pour l'élément li initialement pendant que vous essayez de l'ajouter à un élément "a" dans la fonction.

<div class="row" style="padding-left:21px;">
 <ul class="nav nav-tabs" style="padding-left:40px;">
      <li class="active filter"><a href="#month" onclick="Data('month',this)">This Month</a></li>
      <li class="filter"><a href="#year" onclick="Data('year',this)">Year</a></li>
      <li class="filter"><a href="#last60"  onclick="Data('last60',this)">60 Days</a></li>
      <li class="filter"><a href="#last90"  onclick="Data('last90',this)">90 Days</a></li>
    </ul> 

</div>

<script>
  function Data(string,element)
    { 
      //1. get some data from server according to month year etc.,
      //2. unactive all the remaining li's and make the current clicked element active by adding "active" class to the element
      $('.filter').removeClass('active');

      $(element).parent().addClass('active') ;

    } 
</script>
0
user1776573
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src="jquery-2.1.0.js"></script> 
<script type="text/javascript" >
function openOnImageClick(event)
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
var target = event.target || event.srcElement; // IE

console.log(target);
console.log(target.src);
 var img = document.createElement('img');
 img.setAttribute('src', target.src);
  img.setAttribute('width', '200');
   img.setAttribute('height', '150');
  document.getElementById("images").appendChild(img);


}


</script>
</head>
<body>

<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>

<div id="images" >
</div>

<img src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />
<img src="sabaLogo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />

</body>
</html>
0
Arun