Click here to Skip to main content
14,331,362 members

JavaScript

 
GeneralRe: Debugging Pin
Bram van Kampen28-Jan-19 11:21
memberBram van Kampen28-Jan-19 11:21 
QuestionCan anyone help me understand this code? Pin
Member 1411814323-Jan-19 1:20
memberMember 1411814323-Jan-19 1:20 
I have picked up a fairly simple code from the internet but I am not understanding how it is making the connection with itself.


<style>

body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>



<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>



function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}


For one thing, I don't understand why the button are put at class "tablinks" when such a class does not exist in the entire css. I kind of understand the Javascript and I am someone who is not familiar with Javascript that much. But I just don't understand how the CSS is being worked here.

I would also like to know how this code would work if I used a <href> links here instead of buttons. How would that make my code different?

Thanking in advance.
AnswerRe: Can anyone help me understand this code? Pin
Richard Deeming23-Jan-19 7:35
mveRichard Deeming23-Jan-19 7:35 
QuestionJavaScript : TypeScript :: Python : <what> Pin
Amarnath S20-Jan-19 16:58
professionalAmarnath S20-Jan-19 16:58 
AnswerRe: JavaScript : TypeScript :: Python : <what> Pin
Richard MacCutchan20-Jan-19 21:29
protectorRichard MacCutchan20-Jan-19 21:29 
QuestionInjecting an external page to a div using ajax. Pin
Member 1125974616-Jan-19 23:59
memberMember 1125974616-Jan-19 23:59 
AnswerRe: Injecting an external page to a div using ajax. Pin
Graham Breach17-Jan-19 0:31
memberGraham Breach17-Jan-19 0:31 
GeneralRe: Injecting an external page to a div using ajax. Pin
Member 1125974617-Jan-19 0:36
memberMember 1125974617-Jan-19 0:36 
QuestionCan someone help me reverse engineer this code and get it working as jQuery? Pin
Member 1411874515-Jan-19 4:14
memberMember 1411874515-Jan-19 4:14 
QuestionJavaScript Pin
Bram van Kampen11-Jan-19 13:52
memberBram van Kampen11-Jan-19 13:52 
AnswerRe: JavaScript Pin
Richard MacCutchan11-Jan-19 22:50
protectorRichard MacCutchan11-Jan-19 22:50 
AnswerRe: JavaScript Pin
Nathan Minier14-Jan-19 1:16
professionalNathan Minier14-Jan-19 1:16 
QuestionGet html element position on window scroll Pin
Vinod Jangle9-Jan-19 3:43
memberVinod Jangle9-Jan-19 3:43 
AnswerRe: Get html element position on window scroll Pin
Richard Deeming9-Jan-19 8:12
mveRichard Deeming9-Jan-19 8:12 
QuestionFailing to call the put and post Web Api methods from the react js components Pin
simpledeveloper24-Dec-18 9:55
membersimpledeveloper24-Dec-18 9:55 
Questionget a function to countdown (from any number) to zero Pin
Member 1409810523-Dec-18 14:49
memberMember 1409810523-Dec-18 14:49 
QuestionRe: get a function to countdown (from any number) to zero Pin
Richard MacCutchan25-Dec-18 21:18
protectorRichard MacCutchan25-Dec-18 21:18 
AnswerRe: get a function to countdown (from any number) to zero Pin
Bohdan Stupak9-Jan-19 19:40
professionalBohdan Stupak9-Jan-19 19:40 
Questionhow to get a js fuction to return html opening and closing tag Pin
Member 1409810522-Dec-18 17:34
memberMember 1409810522-Dec-18 17:34 
AnswerRe: how to get a js fuction to return html opening and closing tag Pin
Richard MacCutchan22-Dec-18 23:35
protectorRichard MacCutchan22-Dec-18 23:35 
GeneralRe: how to get a js fuction to return html opening and closing tag Pin
Member 1409810523-Dec-18 14:31
memberMember 1409810523-Dec-18 14:31 
QuestionGet an html table multiple rows as a string URL for Ajax Pin
Member 1409585019-Dec-18 22:55
memberMember 1409585019-Dec-18 22:55 
AnswerRe: Get an html table multiple rows as a string URL for Ajax Pin
Afzaal Ahmad Zeeshan23-Dec-18 0:29
mveAfzaal Ahmad Zeeshan23-Dec-18 0:29 
Questiondebug shopping cart project Pin
ghazabaz13-Dec-18 15:56
memberghazabaz13-Dec-18 15:56 
Questione.target.value, switch-case operators Pin
ghazabaz6-Dec-18 19:22
memberghazabaz6-Dec-18 19:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.