0
votes

Un moyen plus simple de coder ce changement d'arrière-plan onclick - HTML / CSS

Y a-t-il un moyen de simplifier ce code? Je viens de le trouver trop longtemps pour une fonction simple.

J'ai essayé d'utiliser QuerySelectorall (), mais j'ai eu du mal à essayer de le ramener à nouveau. P>

Voir l'extrait de vue inclus. P >

J'ai essayé de chercher une manière plus simple, malheureusement, je suis incapable de trouver. p>

<div class="scrollmenu">
  <a onclick="myFunction()" id="myBtn" href="#Event1">Event 1</a>
  <a onclick="myFunction2()" id="myBtn2" href="#Event2">Event 2</a>
  </div>
  <span id="more">Display Event Here 1.</span>
<span id="more2">Display Event Here 2.</span>

html css button hyperlink timeline

0 commentaires

4 Réponses :

1
votes

Voir mes commentaires dans l'exemple mis à jour ci-dessous.

On cliquer Nous supprimons toutes les classes actives des boutons et sur les zones de texte et d'ajouter la classe active à celles qui en ont besoin. P>

L'avantage ici est que vous ne stockez pas la classe active en JavaScript. De cette façon, vous ne risquez pas de disposer de la possibilité d'avoir une représentation et de l'état stocké pour être synchronisé par d'autres scripts qui pourraient être exécutés. P>

<div class="scrollmenu">
  <a class="btn" href="#" data-show="more1" >Event 1</a>
  <a class="btn" href="#" data-show="more2">Event 2</a>
</div>
<span id="more1" class="more">Display Event Here 1.</span>
<span id="more2" class="more">Display Event Here 2.</span>

1 commentaires

Merci! Je pense que je sais maintenant où j'ai manqué, j'ai essayé de le recodé comme ça, Document.QuerySelectorall ("BTN1", "BTN2", "BTN2" .....) parce que j'essayais d'exclure un seul identifiant.

-2
votes

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container-fluid px-0">
  

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Event 1</a></li>
    <li><a data-toggle="tab" href="#menu1">Event 2</a></li>
    <li><a data-toggle="tab" href="#menu2">Event 3</a></li>
    <li><a data-toggle="tab" href="#menu3">Event 4</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <p>Display Event Here 1.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <p>Display Event Here 2.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <p>Display Event Here 3.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <p>Display Event Here 4.</p>
    </div>
  </div>
</div>

2 commentaires

À peu près sûr que la question inclut montrer / cacher le contenu. Y compris toute la bibliothèque de Bootstrap CSS, la bibliothèque de JQUERY complète et BOOTSTRAP JS (total de 60 Ko) pourrait être un peu survenue pour ce que nous essayons d'atteindre ici.

J'avais vraiment l'intention d'inclure cette animation après avoir simplifié le code, merci de l'inclure.

0
votes

Vous pouvez faire quelque chose comme ça:

<div class="scrollmenu">
	<a onclick="myFunction(event)" class="myBtn" href="#Event1" data-show="more">Event 1</a>
	<a onclick="myFunction(event)" class="myBtn" href="#Event2" data-show="more2">Event 2</a>
</div>
	<span class="hide description more">Display Event Here 1.</span>
	<span class="hide description more2">Display Event Here 2.</span>

1 commentaires

Bonjour monsieur, je pense que cela le fait. Merci!

0
votes

en utilisant ci-dessous JavaScript code> Vous pouvez le rendre plus simple

p>



<div class="scrollmenu">
  <a onclick="myFunction(event)" id="myBtn" href="#Event1">Event 1</a>
  <a onclick="myFunction(event)" id="myBtn2" href="#Event2">Event 2</a>
  <a onclick="myFunction(event)" id="myBtn3" href="#Event3">Event 3</a>
  <a onclick="myFunction(event)" id="myBtn4" href="#Event4">Event 4</a>
  <a onclick="myFunction(event)" id="myBtn5" href="#Event5">Event 5</a>
  <a onclick="myFunction(event)" id="myBtn6" href="#Event6">Event 6</a>
  <a onclick="myFunction(event)" id="myBtn7" href="#Event7">Event 7</a>
  <a onclick="myFunction(event)" id="myBtn8" href="#Event8">Event 8</a>
  <a onclick="myFunction(event)" id="myBtn9" href="#Event9">Event 9</a>
  <a onclick="myFunction(event)" id="myBtn10" href="#Event10">Event 10</a>
</div>
<span id="Event1">Display Event Here 1.</span>
<span id="Event2">Display Event Here 2.</span>
<span id="Event3">Display Event Here 3.</span>
<span id="Event4">Display Event Here 4.</span>
<span id="Event5">Display Event Here 5.</span>
<span id="Event6">Display Event Here 6.</span>
<span id="Event7">Display Event Here 7.</span>
<span id="Event8">Display Event Here 8.</span>
<span id="Event9">Display Event Here 9.</span>
<span id="Event10">Display Event Here 10.</span>

2 commentaires

Salut monsieur, pouvez-vous s'il vous plaît élaborer cette ligne pour moi? document.getElementeyid (id) .style.backgroundColor = "# 000000"; Je crains que cela puisse affecter d'autres identifiants dans la page, corrigez-moi si je me trompe, monsieur.

@pjustindaryll non, il n'affectera pas, nous avons pris la variable Var ID = Event.Target.Id; au lieu de cela, vous pouvez changer votre nom de variable vous-même quoi que ce soit