Javascript держит div скрытым, пока вы не нажмете кнопку, нужна помощь в изменении

В принципе, мой код прямо сейчас скрывает несколько дивов, которые у меня есть на моем веб-сайте, а затем, когда вы нажимаете на ссылку, он заставляет дивов появляться.

Мне нужна помощь, чтобы это было так, что когда я нажимаю на одну ссылку и появляется div, и я нажимаю на другую ссылку, предыдущая исчезает.

Итак, допустим, я нажимаю ссылку "о программе", появляется div, хорошо. Затем я нажимаю на "помощь", и этот див просто появляется над "О", делая вещи грязными.

<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}}
</script>

^Это мой код, вот такой пример этого на моем сайте: 

    <div id="about" class="hidden">
    <div class="content3">
        <p>This is the about section.</p>
        <p>It is currently still being worked on.</p>
    </div>
    </div>

Класс 'content3' - это просто стиль в моем css-файле.

.content3 {
background-color:#FFFFFF;
width:750px;
height:600px;
padding:5px;
padding-left:40px;
margin-top:-650px;
margin-left:auto;
margin-right:auto;
}

Обновление:

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

А затем щелкните вторую ссылку, которая скроет это поле текста, связанного с первой ссылкой, и покажет новую, связанную со второй ссылкой.

Вот мой полный код:

HTML 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script type="text/javascript">
    function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
    item.className=(item.className=='hidden')?'unhidden':'hidden';
    }}
    </script>
</head>

<body>
    <div class="title">
        <p class="text_header">Benjamin Midyette</p>
        <p style="margin-top:-50px">Computer/Network Engineer, Web Developer</p>
    </div>

    <div class="content" align="left">
        <p style="padding-top:20px">
            <a href="javascript:unhide('link')" class="button">This is a link</a><br><br>
            <a href="javascript:unhide('about')" class="button">About</a>
        </p>
    </div>

    <div id="Resume" class="content2"></div>

    <div id="link" class="hidden" style="position:absolute; left:300px; margin-top:-700px;">
            <img alt="A Link" src="pictures/link.png" height="420" width="420">     
    </div>

    <div id="about" class="hidden">
        <div class="content3">
            <p>This is the about section.</p>
            <p>It is currently still being worked on.</p>
        </div>
    </div>      
    </body>
</html>

CSS: 

body {
    background-image:url('http://www.nsgaming.us/pictures/nebula.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background: url('http://www.nsgaming.us/pictures/nebula.png') fixed 100% 100%;}

/*Text styling*/
.text_header {
    font-size:72px
    }

.title {
    margin-top:-30px;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    color:#ffffee;
    width:600px;
    border-radius:8px;
    background-color:#000000;
    background:rgba(0,0,0,.9);
    padding-bottom:1px;
    }

/*Top Button styling*/
.button {
    border:2px solid black;
    background: #3B3B3B; /*#8C8C8C*/
    padding: 3.5px 5px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    color: white;
    font-size: 18px;
    font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
    text-decoration: none;
    }
.button:hover {
    background: #770819;
    color: #ffffff;
    text-decoration:none;}
.button:active {
    background: #590819;}

.content {
    margin-top:40px;
    border: 1px solid black;
    border-radius:8px;
    Opacity:0.8;
    background:#222222;
    width:175px;
    height:400px;
    padding-left:20px;
    padding-top: 0px;}

.content2 {
    background-color:#222222;
    border-radius:4px;
    width:800px;
    height:650px;
    padding:5px;
    padding-left:40px;
    margin-top:-401px;
    margin-left:auto;
    margin-right:auto;
    }

.content3 {
    background-color:#FFFFFF;
    width:750px;
    height:600px;
    padding:5px;
    padding-left:40px;
    margin-top:-635px;
    margin-left:auto;
    margin-right:auto;
    }

.hidden { 
    display: none; }

.unhidden { 
    display: block; }

container {
    align:right;}
opener {
    align:left;}
2 14
javascript html hide

2 ответа:

Вы можете сделать так, если хотите отобразить и скрыть определенный div по щелчку кнопки.

<style>
.hidden{
    display:none;
}

.unhidden{
    display:block;
}
</style>
<script type="text/javascript">
function unhide(clickedButton, divID) {
var item = document.getElementById(divID);
if (item) {
    if(item.className=='hidden'){
        item.className = 'unhidden' ;
        clickedButton.value = 'hide'
    }else{
        item.className = 'hidden';
        clickedButton.value = 'unhide'
    }
}}

</script>

<body>
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
<input type="button" onclick="unhide(this, 'about') " value="unhide">
</body>

UPDATE: передайте другой идентификатор div, который вы хотите сделать исчезающим по щелчку div one. Пожалуйста, обновите свой код с помощью кода ниже.

Сценарий 

<script type="text/javascript">
    function unhide(divID, otherDivId) {
    var item = document.getElementById(divID);
    if (item) {
            item.className=(item.className=='hidden')?'unhidden':'hidden';
        }
        document.getElementById(otherDivId).className = 'hidden';
    }
</script>

HTML

<p style="padding-top:20px">
    <a href="javascript:unhide('link', 'about')" class="button">This is a link</a><br><br>
    <a href="javascript:unhide('about', 'link')" class="button">About</a>
</p>
9

Я не правильно понял ваш вопрос. Но если вы пытаетесь сделать различные элементы div видимыми при нажатии на разные ссылки, то это то, что вы должны сделать:

<div id = "anchor-div">
      <ul>
        <li> <a id="about-anchor" href="javascript:;"> About</a> </li> 
        <li> <a id="help-anchor" href="javascript:;"> Help </a> </li>
      </ul>
</div>


<div id="content-div">
       <div id="about-content"></div>
       <div id="help-content"></div>
</div>


$(document).ready(function(){

        //if you wish to keep both the divs hidden by default then dont forget to hide //them           
        $("#help-content").hide();
        $("#about-content").hide();

       $("#about-anchor").click(function(){
             $("#help-content").hide();
             $("#about-content").show();
        });

      $("#help-anchor").click(function(){
              $("#help-content").show();
             $("#about-content").hide();
       });
});

Также не забудьте добавить библиотеку jQuery.

4