2011-12-24 188 views
-2

可能重复:
Adding show/hide to my div tags隐藏/显示div标签

隐藏/显示div标签是不是为我工作,也许你可以帮我解决吗?当我点击链接时,它会隐藏所有div标签,但不会显示新标签。 http://paste.php.lv/37ed543091129e148004a3e5335904fb?lang=php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<title>STANDBY Countdown Script</title> 
<script src="script/jquery-1.6.2.min.js" type="text/javascript"></script> 
<script src="script/jquery.jcountdown1.3.3.min.js" type="text/javascript"></script> 
<link rel="stylesheet" type="text/css" href="css/jcountdown-style.css" /> 
<link rel="stylesheet" type="text/css" href="css/standby-style.css" /> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#time").countdown({ 
     date: "January 31, 2013", /* Counting to a date */ 
     offset: 1, 
     hoursOnly: false, 
     leadingZero: true 
    }); 

    $('[placeholder]').focus(function() { 
    var input = $(this); 
    if (input.val() == input.attr('placeholder')) { 
     input.val(''); 
     input.removeClass('placeholder'); 
    } 
    }).blur(function() { 
    var input = $(this); 
    if (input.val() == '' || input.val() == input.attr('placeholder')) { 
     input.addClass('placeholder'); 
     input.val(input.attr('placeholder')); 
    } 
    }).blur();  

}); 
</script> 

<script> 
    $(function() { 
     $("a.menu").click(function() { 
      $("div.content").hide(); 
      $(this.href).show(); 
      return false; 
     }); 
    }); 
</script> 

</head> 
<body> 
    <div id="header"> 
    <div id="header-menu"> 
    <a class="menu" href="#home">Home</a> 
    <a class="menu" href="#aboutus">About Us</a> 
    <a class="menu" href="#">Contact Us</a> 
    <a class="menu" href="#">Information</a> 
    </div> 
    </div> 
    <div class="content" id="#home"> 
    <img src="images/christmas-hat.png" style="margin-top: -50px; margin-right: -50px;float: right;" /> 
    <div class="content-top"> 
     <h1>Welcome to STANDBY Test Version 1</h1> 
     <p class="description">Currently we are on Test Version 1. For more information, please leave your email and name below. We will contact you back in one working day!</p> 
    </div> 
     <div class="content-middle"> 
      <h2>UNDER CONSTRUCTION:</h2> 
     <p id="time" class="time"></p> 
     <div class="time-text"> 
     <span class="d">Days</span> 
     <span class="h">Hours</span> 
     <span class="m">Minutes</span> 
     <span class="s">Seconds</span> 
     </div> 
    </div>  
     <div class="content-bottom"> 
     <table> 
      <tr> 
       <td></td> 
       <td></td> 
       <td><?php 
       if(isset($_GET['submit']) && $_GET['submit'] == 'Send') { 
       if($_GET['email'] != '') 
       { 
        $email = $_GET['email']; 
        if(!preg_match('/^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)+$/', $email)) { 
        ?> 
        <span class="submit">Email must be valid!</span> 
        <?php 
        } 
        else { 
        $nl="\n"; 
        $headers = "From: ".$email." <".$email.">".$nl; 
         $headers .= "Message-ID: <".time()."-".$email.">".$nl; 
         $headers .= "X-Mailer: PHP v".phpversion().$nl; 
         $headers .= 'MIME-Version: 1.0'.$nl; 
         $headers .= "Content-Type: text/html; charset=UTF-8; boundary=\"".md5(time())."\"".$nl.$nl;   
        $to = '[email protected]'; 
        $subject = 'I want to learn more about your upcoming project'; 
        $content = 'Hello, I would like to learn more about your project! <br /> Please reply to '.$email.''; 
        mail($to, $subject, $content, $headers); 
        ?> 
        <span class="submit" style="Color: green; border-color: green;">Your email was sent!</span> 
        <?php   
        } 
       } 
       else { 
        ?> 
        <span class="submit">All fields must be filled!</span> 
        <?php   
       } 
       } 
      ?></td> 
      </tr> 
     </table> 
     <div class="form"> 
     <form method="get" action=""> 
      <input type="text" name="email" placeholder="Type your email here" /> 
      <input type="submit" name="submit" value="Send"> 
     </form> 
     </div> 
     <div class="icons">  
      <td><a href="http://facebook.com" target="_blank"><img src="images/ico_facebook.png" /></a>&nbsp;<a href="http://twitter.com" target="_blank"><img src="images/ico_twitter.png" /></a>&nbsp;<a href="http://linkedin.com" target="_blank"><img src="images/ico_linkedin.png" /></a></td> 
     </div> 
    </div> 
    <div class="content-shadow"></div> 
    </div> 
    <div class="content" id="aboutus"> 
    <img src="images/christmas-hat.png" style="margin-top: -50px; margin-right: -50px;float: right;" /> 
    da 
    </div> 
</body> 
</html> 
+1

显示生成的HTML,JavaScript的,而是将让它更容易帮助你。 – 2011-12-24 15:11:21

+2

邮政编码,而不是一些随机网站的链接。 – BNL 2011-12-24 15:11:52

+0

其中是您试图显示和隐藏的HTML?你只显示HTML。首先尝试一个简单的例子。你有看看:http://api.jquery.com/hide/ – 2011-12-24 15:16:56

回答

1

这应该导致你在正确的道路:http://jsfiddle.net/m7vhv/

HTML

<div id="header"> 
    <div id="header-menu"> 
     <a class="menu" href="#home">Home</a> 
     <a class="menu" href="#aboutus">About Us</a> 
     <a class="menu" href="#">Contact Us</a> 
     <a class="menu" href="#">Information</a> 
    </div> 
</div> 

<div class="content" id="home"> 
    home 
</div> 

<div class="content" id="aboutus"> 
    about us 
</div> 

JS

$("a.menu").click(function() { 
    $("div.content").hide(); 
    $($(this).attr('href')).show(); 
    return false; 
});