Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1528 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Repere un div après click + div clickable

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Repere un div après click + div clickable

n°2341766
lnquaidors​ay
Posté le 20-11-2019 à 00:13:53  profilanswer
 

Je suis en train de chercher en jquery à
 
- Rendre une div contenant une icone font awesome et un text clickable => div List 1
- lors du click de ce div, je suis rediriger sur un autre div contenant un tableau d'element avec un texte Retour list 1
- lors du click sur Retour list 1, je suis ramener vers le haut c'est à dire sur la div List 1
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>My Website</title>
  5. <meta charset="UTF-8" />
  6.      <script src="https://kit.fontawesome.com/50f2db4f91.js" crossorigin="anonymous"></script>
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
  8.            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
  9.            <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
  10.            <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>           
  11.            <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" /> 
  12.       </head> 
  13. <style type="text/css">
  14. * { font-family: Verdana, Arial, sans-serif; }
  15. body { background-color: #fff; cursor: default; }
  16. h1 { font-size: 15pt; }
  17. p { font-size: 10pt; }
  18. </style>
  19. </head>
  20. <body>
  21. <h1>Your Page</h1>
  22. <div class="row" style="margin-bottom:20px;">
  23.         <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 divlist1">
  24.  <div class="btn-primary">
  25.  <i class="fas fa-clock"></i>
  26.          <button type="button" class="btn  summary">List 1</button>
  27.  </div>
  28.         </div>
  29.         <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 divlist2">
  30.  <div class="btn-success">
  31.  <i class="fas fa-thumbs-up"></i>
  32.   <button type="button" class="btn ">List 2</button>
  33.  </div>
  34.            
  35.         </div>
  36. </div>
  37. <div class="row" style="margin:0;">
  38.             <div class="table-responsive">
  39.                 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 list1" style="margin-top:15px;">
  40. <table id="example1" class="display" style="width:100%">
  41.         <thead>
  42.             <tr>
  43.                 <th>Name</th>
  44.                 <th>Position</th>
  45.                 <th>Office</th>
  46.                 <th>Age</th>
  47.                 <th>Start date</th>
  48.                 <th>Salary</th>
  49.             </tr>
  50.         </thead>
  51.         <tbody>
  52.             <tr>
  53.                 <td>Tiger Nixon</td>
  54.                 <td>System Architect</td>
  55.                 <td>Edinburgh</td>
  56.                 <td>61</td>
  57.                 <td>2011/04/25</td>
  58.                 <td>$320,800</td>
  59.             </tr>
  60.             <tr>
  61.                 <td>Garrett Winters</td>
  62.                 <td>Accountant</td>
  63.                 <td>Tokyo</td>
  64.                 <td>63</td>
  65.                 <td>2011/07/25</td>
  66.                 <td>$170,750</td>
  67.             </tr>
  68.             <tr>
  69.                 <td>Ashton Cox</td>
  70.                 <td>Junior Technical Author</td>
  71.                 <td>San Francisco</td>
  72.                 <td>66</td>
  73.                 <td>2009/01/12</td>
  74.                 <td>$86,000</td>
  75.             </tr>
  76.   <tr>
  77.                 <td>Tiger Nixon</td>
  78.                 <td>System Architect</td>
  79.                 <td>Edinburgh</td>
  80.                 <td>61</td>
  81.                 <td>2011/04/25</td>
  82.                 <td>$320,800</td>
  83.             </tr>
  84.             <tr>
  85.                 <td>Garrett Winters</td>
  86.                 <td>Accountant</td>
  87.                 <td>Tokyo</td>
  88.                 <td>63</td>
  89.                 <td>2011/07/25</td>
  90.                 <td>$170,750</td>
  91.             </tr>
  92.             <tr>
  93.                 <td>Ashton Cox</td>
  94.                 <td>Junior Technical Author</td>
  95.                 <td>San Francisco</td>
  96.                 <td>66</td>
  97.                 <td>2009/01/12</td>
  98.                 <td>$86,000</td>
  99.             </tr>
  100.   <tr>
  101.                 <td>Tiger Nixon</td>
  102.                 <td>System Architect</td>
  103.                 <td>Edinburgh</td>
  104.                 <td>61</td>
  105.                 <td>2011/04/25</td>
  106.                 <td>$320,800</td>
  107.             </tr>
  108.             <tr>
  109.                 <td>Garrett Winters</td>
  110.                 <td>Accountant</td>
  111.                 <td>Tokyo</td>
  112.                 <td>63</td>
  113.                 <td>2011/07/25</td>
  114.                 <td>$170,750</td>
  115.             </tr>
  116.             <tr>
  117.                 <td>Ashton Cox</td>
  118.                 <td>Junior Technical Author</td>
  119.                 <td>San Francisco</td>
  120.                 <td>66</td>
  121.                 <td>2009/01/12</td>
  122.                 <td>$86,000</td>
  123.             </tr>
  124.   <tr>
  125.                 <td>Tiger Nixon</td>
  126.                 <td>System Architect</td>
  127.                 <td>Edinburgh</td>
  128.                 <td>61</td>
  129.                 <td>2011/04/25</td>
  130.                 <td>$320,800</td>
  131.             </tr>
  132.             <tr>
  133.                 <td>Garrett Winters</td>
  134.                 <td>Accountant</td>
  135.                 <td>Tokyo</td>
  136.                 <td>63</td>
  137.                 <td>2011/07/25</td>
  138.                 <td>$170,750</td>
  139.             </tr>
  140.             <tr>
  141.                 <td>Ashton Cox</td>
  142.                 <td>Junior Technical Author</td>
  143.                 <td>San Francisco</td>
  144.                 <td>66</td>
  145.                 <td>2009/01/12</td>
  146.                 <td>$86,000</td>
  147.             </tr>
  148.   <tr>
  149.                 <td>Tiger Nixon</td>
  150.                 <td>System Architect</td>
  151.                 <td>Edinburgh</td>
  152.                 <td>61</td>
  153.                 <td>2011/04/25</td>
  154.                 <td>$320,800</td>
  155.             </tr>
  156.             <tr>
  157.                 <td>Garrett Winters</td>
  158.                 <td>Accountant</td>
  159.                 <td>Tokyo</td>
  160.                 <td>63</td>
  161.                 <td>2011/07/25</td>
  162.                 <td>$170,750</td>
  163.             </tr>
  164.             <tr>
  165.                 <td>Ashton Cox</td>
  166.                 <td>Junior Technical Author</td>
  167.                 <td>San Francisco</td>
  168.                 <td>66</td>
  169.                 <td>2009/01/12</td>
  170.                 <td>$86,000</td>
  171.             </tr>
  172.            
  173.             </tbody>
  174.     </table>
  175.     <span class="col-lg-12 col-md-12 col-sm-12 col-xs-12">Retour list1</span>
  176.     </div>
  177.     </div>
  178. </div>
  179. <div class="row" style="margin:0;">
  180.             <div class="table-responsive">
  181.                 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 list2" style="margin-top:15px;">
  182. <table id="example2" class="display" style="width:100%">
  183.         <thead>
  184.             <tr>
  185.                 <th>Name</th>
  186.                 <th>Position</th>
  187.                 <th>Office</th>
  188.                 <th>Age</th>
  189.                 <th>Start date</th>
  190.                 <th>Salary</th>
  191.             </tr>
  192.         </thead>
  193.         <tbody>
  194.             <tr>
  195.                 <td>Tiger Nixon</td>
  196.                 <td>System Architect</td>
  197.                 <td>Edinburgh</td>
  198.                 <td>61</td>
  199.                 <td>2011/04/25</td>
  200.                 <td>$320,800</td>
  201.             </tr>
  202.             <tr>
  203.                 <td>Garrett Winters</td>
  204.                 <td>Accountant</td>
  205.                 <td>Tokyo</td>
  206.                 <td>63</td>
  207.                 <td>2011/07/25</td>
  208.                 <td>$170,750</td>
  209.             </tr>
  210.             <tr>
  211.                 <td>Ashton Cox</td>
  212.                 <td>Junior Technical Author</td>
  213.                 <td>San Francisco</td>
  214.                 <td>66</td>
  215.                 <td>2009/01/12</td>
  216.                 <td>$86,000</td>
  217.             </tr>
  218.   <tr>
  219.                 <td>Tiger Nixon</td>
  220.                 <td>System Architect</td>
  221.                 <td>Edinburgh</td>
  222.                 <td>61</td>
  223.                 <td>2011/04/25</td>
  224.                 <td>$320,800</td>
  225.             </tr>
  226.             <tr>
  227.                 <td>Garrett Winters</td>
  228.                 <td>Accountant</td>
  229.                 <td>Tokyo</td>
  230.                 <td>63</td>
  231.                 <td>2011/07/25</td>
  232.                 <td>$170,750</td>
  233.             </tr>
  234.             <tr>
  235.                 <td>Ashton Cox</td>
  236.                 <td>Junior Technical Author</td>
  237.                 <td>San Francisco</td>
  238.                 <td>66</td>
  239.                 <td>2009/01/12</td>
  240.                 <td>$86,000</td>
  241.             </tr>
  242.   <tr>
  243.                 <td>Tiger Nixon</td>
  244.                 <td>System Architect</td>
  245.                 <td>Edinburgh</td>
  246.                 <td>61</td>
  247.                 <td>2011/04/25</td>
  248.                 <td>$320,800</td>
  249.             </tr>
  250.             <tr>
  251.                 <td>Garrett Winters</td>
  252.                 <td>Accountant</td>
  253.                 <td>Tokyo</td>
  254.                 <td>63</td>
  255.                 <td>2011/07/25</td>
  256.                 <td>$170,750</td>
  257.             </tr>
  258.             <tr>
  259.                 <td>Ashton Cox</td>
  260.                 <td>Junior Technical Author</td>
  261.                 <td>San Francisco</td>
  262.                 <td>66</td>
  263.                 <td>2009/01/12</td>
  264.                 <td>$86,000</td>
  265.             </tr>
  266.   <tr>
  267.                 <td>Tiger Nixon</td>
  268.                 <td>System Architect</td>
  269.                 <td>Edinburgh</td>
  270.                 <td>61</td>
  271.                 <td>2011/04/25</td>
  272.                 <td>$320,800</td>
  273.             </tr>
  274.             <tr>
  275.                 <td>Garrett Winters</td>
  276.                 <td>Accountant</td>
  277.                 <td>Tokyo</td>
  278.                 <td>63</td>
  279.                 <td>2011/07/25</td>
  280.                 <td>$170,750</td>
  281.             </tr>
  282.             <tr>
  283.                 <td>Ashton Cox</td>
  284.                 <td>Junior Technical Author</td>
  285.                 <td>San Francisco</td>
  286.                 <td>66</td>
  287.                 <td>2009/01/12</td>
  288.                 <td>$86,000</td>
  289.             </tr>
  290.   <tr>
  291.                 <td>Tiger Nixon</td>
  292.                 <td>System Architect</td>
  293.                 <td>Edinburgh</td>
  294.                 <td>61</td>
  295.                 <td>2011/04/25</td>
  296.                 <td>$320,800</td>
  297.             </tr>
  298.             <tr>
  299.                 <td>Garrett Winters</td>
  300.                 <td>Accountant</td>
  301.                 <td>Tokyo</td>
  302.                 <td>63</td>
  303.                 <td>2011/07/25</td>
  304.                 <td>$170,750</td>
  305.             </tr>
  306.             <tr>
  307.                 <td>Ashton Cox</td>
  308.                 <td>Junior Technical Author</td>
  309.                 <td>San Francisco</td>
  310.                 <td>66</td>
  311.                 <td>2009/01/12</td>
  312.                 <td>$86,000</td>
  313.             </tr>
  314.   <tr>
  315.                 <td>Tiger Nixon</td>
  316.                 <td>System Architect</td>
  317.                 <td>Edinburgh</td>
  318.                 <td>61</td>
  319.                 <td>2011/04/25</td>
  320.                 <td>$320,800</td>
  321.             </tr>
  322.             <tr>
  323.                 <td>Garrett Winters</td>
  324.                 <td>Accountant</td>
  325.                 <td>Tokyo</td>
  326.                 <td>63</td>
  327.                 <td>2011/07/25</td>
  328.                 <td>$170,750</td>
  329.             </tr>
  330.             <tr>
  331.                 <td>Ashton Cox</td>
  332.                 <td>Junior Technical Author</td>
  333.                 <td>San Francisco</td>
  334.                 <td>66</td>
  335.                 <td>2009/01/12</td>
  336.                 <td>$86,000</td>
  337.             </tr>
  338.            
  339.             </tbody>
  340.     </table>
  341.     <span class="col-lg-12 col-md-12 col-sm-12 col-xs-12">Retour list2</span>
  342.     </div>
  343.     </div>
  344. </div>
  345. <script
  346.   src="https://code.jquery.com/jquery-3.4.1.js"
  347.   integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  348.   crossorigin="anonymous"></script>
  349.    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  350.    <script>
  351.    $(document).ready(function() {
  352.     $('#example1').DataTable();
  353. $('#example2').DataTable();
  354.  
  355.     $(document).on('click', '.divlist1', function(event){
  356.   //var divlist1 = $(this);   // the divlist1 that was clicked on
  357.   // Here, "do something" with divlist1  
  358.   alert("Good morning" );
  359. });
  360.  
  361. } );
  362.      
  363.    </script>
  364. </body>
  365. </html>


Message édité par lnquaidorsay le 20-11-2019 à 00:15:47
mood
Publicité
Posté le 20-11-2019 à 00:13:53  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Repere un div après click + div clickable

 

Sujets relatifs
Attendre le chargement d'une nouvelle page après click[resolu]modal sur un onMouseDown au lieux du click souris
pause sur un click en javascriptVBA Excel : série de label_x_click()
powerpoint2010 créer un compteur de click[PHP et HTML] Mettre une varial PHP lors d'un click d'un bouton HTML.
Lib sigma.gs : comment associer un événement "click" à un noeud?procédure click
Jeu de Point & Click : C++ ou Actionscript ?lors de click sur option de liste déroulante
Plus de sujets relatifs à : Repere un div après click + div clickable


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR