Функция очистки div в вертикальных вкладках не работает - PullRequest
Новая
       0

Функция очистки div в вертикальных вкладках не работает

0 голосов
/ 11 сентября 2018

Я изучаю javascript и у меня есть проблема с div ... В моем резюме есть четыре div, которые должны быть скрыты, и должен быть виден только активный div.

Все хорошо, нов начале все смешано.Вместо этого я хотел бы, чтобы было видно только общее содержание табуляции ...

Вы можете помочь с этим?

https://github.com/DevFrancoisXavierPelletier/CV

Ответы [ 3 ]

0 голосов
/ 11 сентября 2018

Вы можете использовать свойство display в CSS 

#General {
    display: block;
}
.tabcontent{
    display: none;
}

Также добавьте активный класс на первую кнопку (General) .. чтобы вы увидели кнопку General в белом (как выбрано) .. 

<button class="tablinks active" onclick="openTab(event, 'General')">Général</button>


function openTab(evt, tab) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(tab).style.display = "block";
    if(evt){
      evt.currentTarget.className += " active";
    }
} 
html, body{
margin: 0;
padding: 0;
top: 0;
}

#sidebar{
background: #c5deea;
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%);
background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%);
background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); 
position: fixed;
z-index: 1;
top: 0;
left: 0;
top: 0;
height:100%;
width:20%;
}

#photo{
width:100%;
height:40%;
}

.sidenav button {
width: 100%;
height: 75px;
padding: 6px 8px 6px 16px;
font-family: sans-serif;
font-size: 25px;
text-decoration: none;
text-align: center;
color: darkslategrey;
background-color: transparent;
border: none;
outline: none;
display: block;
}

.sidenav button:hover {
background-color: navajowhite;
}

.sidenav button.active {
background-color: white;
}

.tabcontent{
background: transparent;
position: fixed;
z-index: 1;
top: 0;
left: 20%;
top: 0;
padding: 2.5%;
height:97.5%;
width:75%;
}

h3{
font-family: sans-serif;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 25px;
    font-family: sans-serif;
}

th, td {
    text-align: left;
    padding: 16px;
}

.bold {
    background-color:antiquewhite;
font-weight: bold;
}
#General {
    display: block;
}
.tabcontent{
    display: none;
}

.container {
    width: 100%; /* Full width */
    background-color: #ddd; /* Grey background */
}

.skills {
    text-align: right; /* Right-align text */
    padding: 10px; /* Add some padding */
    color: white; /* White text color */
}

.html {width: 90%; background-color: #4CAF50;} /* Green */
.css {width: 80%; background-color: #2196F3;} /* Blue */
.js {width: 65%; background-color: #f44336;} /* Red */
.php {width: 60%; background-color: #808080;} /* Dark Grey */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>My CV online</title>
    <link href="style.css" rel="stylesheet" />

</head>



<body>
    
<div id="sidebar">
    <div id="photo">
    <img src="https://raw.githubusercontent.com/DevFrancoisXavierPelletier/CV/master/image.png" alt="Francois Xavier Pelletier" style="width:75%;height:75%; padding: 12.5%;">
    </div>
    <div class="sidenav">
        <button class="tablinks active" onclick="openTab(event, 'General')">Général</button>
        <button class="tablinks" onclick="openTab(event, 'Experience')">Expérience</button>
        <button class="tablinks" onclick="openTab(event, 'Studies')">Etudes</button>
        <button class="tablinks" onclick="openTab(event, 'Skills')">Compétences</button>
    </div>
</div>

<div id="General" class="tabcontent">
  <h3>Informations générales</h3>
    <table class="table"> 
        <tr>
            <td class="bold">Prénom</td>
            <td class="bold">Nom</td>
            <td class="bold">Age</td>
        </tr>
        <tr>
            <td>François Xavier</td>
            <td>Pelletier</td>
            <td>29 ans</td>
        </tr>
        <tr>
            <td class="bold">Adresse</td>
            <td class="bold">Code Postal</td>
            <td class="bold">Ville</td>
        </tr>
         <tr>
            <td>52 rue Madame de Maintenon</td>
            <td>78120</td>
            <td>Rambouillet</td>
        </tr>
    </table>
    
    <h3>Contact</h3>
    
    <table class="table"> 
        <tr>
            <td class="bold">Téléphone</td>
            <td class="bold">Email</td>
        </tr>
        <tr>
            <td>+33 **********</td>
            <td>dev.francois.xavier.pelletier@gmail.com</td>
        </tr>
    </table>
    
    <h3>Mobilité</h3>
    
    <table class="table"> 
        <tr>
            <td class="bold">Permis</td>
            <td class="bold">Véhicule</td>
        </tr>
        <tr>
            <td>B</td>
            <td>Non</td>
        </tr>
    </table>
</div>

<div id="Experience" class="tabcontent">
  <h3>Experience</h3>
    <table class="table"> 
        <tr>
            <td class="bold">Nom du projet</td>
            <td class="bold">Adresse en ligne</td>
            <td class="bold">Contact</td>
        </tr>
        <tr>
            <td>Eagle-dev</td>
            <td>www.eagle-dev.com</td>
            <td>dev.francois.xavier.pelletier@gmail.com</td>
        </tr>
         <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

<div id="Studies" class="tabcontent">
  <h3>Etudes</h3>
    <table class="table"> 
        <tr>
            <td class="bold">Année</td>
            <td class="bold">Nom de l'établissement</td>
            <td class="bold">Statut</td>
        </tr>
        <tr>
            <td>2018-2019</td>
            <td>IFOCOP (Paris) - Développeur intégrateur web</td>
            <td>En cours</td>
        </tr>
        <tr>
            <td>2014-2017</td>
            <td>War Studies Academy (Varsovie) - Relations internationales</td>
            <td>Licence obtenue</td>
        </tr>
    </table>
</div>
    
<div id="Skills" class="tabcontent">
  <h3>Compétences</h3>
    
    <p>HTML</p>
    <div class="container">
        <div class="skills html">90%</div>
    </div>

    <p>CSS</p>
    <div class="container">
        <div class="skills css">80%</div>
    </div>

    <p>JavaScript</p>
    <div class="container">
        <div class="skills js">40%</div>
    </div>

    <p>PHP</p>
    <div class="container">
        <div class="skills php">0%</div>
    </div> 
</div>
    
    
<script src="myScript1.js"></script>   
    

</body>
0 голосов
/ 11 сентября 2018

Если вы хотите сделать это с помощью кода js, просто добавьте этот код где-нибудь в index.html: 

<script>
    openTab(event, 'General');
</script>

, но это неверный путь!лучший и легкий способ - справиться с CSS, поместите этот класс CSS внизу style.css: 

.tabcontent{
    display: none;
}

.tabcontent:first-child{
    display: block;
}
0 голосов
/ 11 сентября 2018

В вашем CSS просто добавьте ... 

.tabcontent{
    display: none;
}

#General {
    display: block;
}

Затем просто добавьте активный класс к первой ссылке.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...