通过单击图像隐藏和显示div

时间:2013-03-15 20:28:03

标签: javascript jquery onclick show-hide

我正在尝试根据点击的图像显示和隐藏div,因此当您单击resteraunt图像时,它会显示名为members窗口的div。我得到的错误是Uncaught SyntaxError: Unexpected token {

这是单独的JavaScript文件上的脚本

 $(document).ready(resteraunt(){

    $('people').click(function(){
    $("memberswindow").show();

    });

    });

这是HTML

 <!DOCTYPE html>

   <html>

   <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
       <script src="Wolfeboro_Connection/Scripts/homepage.js"></script>
       <script src="Wolfeboro_Connection/Scripts/menu.js"></script>

   <link rel='stylesheet' href='Wolfeboro_Connection/CSS/index.css'> 


   </head>

   <body>



   <img src="Wolfeboro_Connection/wc.png" id="wc">

   <a href='' onclick='resteraunt();'><img src='Wolfeboro_Connection/resteraunt.jpg'        
   id="resteraunt"></a>
   <a href='' onclick='map();'><img src='Wolfeboro_Connection/map.jpg' id="map"></a>
   <a href='' onclick='mail();'><img src='Wolfeboro_Connection/mail.jpg' id="mail"></a>
   <a href='' onclick='people();'><img src='Wolfeboro_Connection/people.jpg' id="people"></a>

   <div id="window"> <div id="memberswindow"> <input type="text" id="username"   
   placeholder="Username">

   <input type="text" id="loginpassword" placeholder="Password">

   <input type="text" id="email" placeholder="Email"> </div> </div>

   <div id="banner"> <h1> Wolfeboro Connection </h1> </div>









   </body>

   </html>

2 个答案:

答案 0 :(得分:6)

jquery要求您通过表示符号“。”来声明目标元素是“类”还是“id”。和“#”分别

试试这个:

$("#people").click(function(){
  $("#memberswindow").show();
});

您对document.ready()调用使用的语法也不正确,请尝试将其作为完整解决方案:

$(document).ready(function(){
    $("#people").click(function(){
      $("#memberswindow").show();
    });
});

答案 1 :(得分:0)

您无法为不同的变体创建方法。想象一下,你必须为100种不同的场景展示div?

可以采用通用方法。

  1. 为每个实体创建rel / class属性

    <div id="ListenAllClick">
      <a href="#"><img src="mysrx" rel="divIdToShow"/></a>
      <a href="#"></a>
    </div>
    
  2. 抓住所有锚定点击事件

    $(function() {  // equivalent to $(document).ready(function(){});
    
       $("a").on("click", function(eV) { 
    
          /* for better performance use 
              $("#ListenAllClick").on("click", "a", function() {});
              instead of 
              $("a").on("click", function() { 
          */
          eV.preventDefault();
          $("#" + $(this).attr("rel"/*"class"*/)).show();
       });
    });