清除垂直标签中的div的功能不起作用

时间：2018-09-11 17:38:23

标签： javascript html css function

我正在学习JavaScript，但div出现问题...在我的简历中，应该隐藏四个div，而只有活动div应该可见。

一切都很好，但是在开始时，所有东西都混在一起了。相反，我希望只有常规的tabcontent可见...

您能帮上忙吗？

https://github.com/DevFrancoisXavierPelletier/CV

3 个答案:

答案 0 :(得分：0)

在您的CSS中只需添加... 

.tabcontent{
    display: none;
}

#General {
    display: block;
}

然后将活动类添加到第一个链接。

答案 1 :(得分：0)

您可以在CSS中使用显示属性

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

还可以在第一个按钮（常规）上添加活动的班级。因此，您将看到白色的常规按钮（已选中）。

<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>

答案 2 :(得分：0)

如果要使用js代码执行此操作，只需将此代码添加到index.html中的某个位置即可：

android.net.uri$StringUri

但这不是正确的方法！最好的方法和轻量级方法是使用CSS处理，请将此CSS类放在style.css的底部：

<script>
    openTab(event, 'General');
</script>
相关问题
最新问题