Javascript hält ein div ausgeblendet, bis Sie auf eine Schaltfläche klicken, müssen helfen, ändern

Grundsätzlich, meinen code jetzt hält ein paar von den divs, die ich auf meiner website versteckt und dann, wenn Sie auf einen link klicken, es macht die divs erscheinen.

Brauche ich Hilfe, so dass es so dass wenn ich auf einen link und ein div angezeigt wird und ich klicke auf einen anderen link, das Vorherige verschwindet.

Also sagen wir mal ich klicke auf den link 'Über', das div angezeigt wird, gut. Dann klicke ich auf "Hilfe" und das div nur angezeigt wird, ÜBER 'Über' die Dinge chaotisch.

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

^Das ist mein code, hier ist eine Probe davon in meiner website:

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

Der Klasse "content3", ist nur styling in meine css-Datei.

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

UPDATE:

Sorry, ich sollte mehr erarbeiten..
Ich muss in der Lage sein, die im Grunde auf eine erste Glied und haben es ein Feld mit text.

und klicken Sie dann auf einen zweiten link, der verbergen, die box der zugeordnete text der erste link und zeigen eine neue, die verbunden ist mit dem zweiten link.

Dies ist mein VOLLSTÄNDIGER code:

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

Wenn ich mich nicht Irre, wollen Sie die display-div-Element auf besonderes Klick auf eine Schaltfläche-und ausblenden, erschien div auf Klick auf Schaltfläche andere.?
Ja, ich habe versucht, Reversieren Sie, indem Sie 'verborgen' , 'verdeckt und 'sichtbar' (im Grunde das Gegenteil von der 3. zur letzten code-Zeile in die erste code-box), aber es hat nicht funktioniert

InformationsquelleAutor Megatoaster | 2014-02-01

Könnten Sie dies so tun, wenn Sie wollen, um das ein-und ausblenden insbesondere div auf Klick der Schaltfläche.

<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: Übergeben, der andere div-id, die Sie wollen, verschwinden auf Klick auf div. Bitte aktualisieren Sie Ihren code mit dem code unten.

SKRIPT

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

Vielen Dank für den Beitrag, ich aktualisiert mein original-Beitrag zu machen, klar, was ich war auf der Suche für, sorry, war unklar.
Bitte haben Sie einen Blick aktualisierte Antwort.
Vielen Dank! Es funktioniert perfekt! Für die Zukunft, wenn ich will hinzufügen, ein 3. link, würde ich fügen Sie es einfach auf die links in der "javascript:einblenden (") - tag? Wie, wenn ich eine Seite aufgerufen, sagen, 'Musik', hätte ich 3 links, jeder von Ihnen mit ('link', 'über', 'Musik'?
In diesem Fall, Sie haben, um Dritte div-id mit unhide('link', 'about', 'music')', und im inneren der unhide() Funktion, die Sie hinzufügen müssen, document.getElementById(thirdId).className = 'hidden'; thirdId wird immer als parameter mit function unhide(divID, otherDivId, thirdId), Aber wenn Sie wollen, mehr links/divs, gute Praxis wäre, erhalten alle divs(die verschwinden) von className und machen es verschwinden.

InformationsquelleAutor Suman Bogati

Ich verstehe nicht, Ihre Frage richtig. Aber wenn Sie versuchen, um verschiedene div Elemente sichtbar bei Klick auf die verschiedenen links, dann dies ist, was Sie tun sollten:

<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();
       });
});

Vergessen Sie auch nicht zu fügen jQuery-Bibliothek.

InformationsquelleAutor Smrita

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.