web-dev-qa-db-ja.com

Javascriptは、ボタンをクリックするまでdivを非表示のままにします。

基本的に、私のコードは現在、自分のWebサイトにあるdivのいくつかを非表示にしておき、リンクをクリックするとdivが表示されます。

あるリンクをクリックしてdivが表示され、別のリンクをクリックすると、前のリンクが消えるように支援が必要です。

そこで、「About」リンクをクリックすると、divが表示されます。次に、[ヘルプ]をクリックすると、そのdivが[About]の上に表示され、物事が煩雑になります。

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

更新：

申し訳ありませんが、さらに詳しく説明する必要があります。基本的に最初のリンクをクリックして、テキストボックスを表示できるようにする必要があります。

2番目のリンクをクリックすると、最初のリンクに関連付けられたテキストボックスが非表示になり、2番目のリンクに関連付けられた新しいボックスが表示されます。

これは私の完全なコードです：

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;}
javascripthtmlhide
14
Megatoaster

ボタンのクリック時に特定の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>

PDATE： div 1のクリックで非表示にする他のdiv idを渡します。以下のコードでコードを更新してください。

脚本

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

私はあなたの質問を適切に理解していません。しかし、異なるリンクをクリックしたときに異なる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
Smrita