我的jQuery语法有什么问题?

时间:2014-11-27 18:34:43

标签: jquery

根据我的阅读,这应该是此jQuery的正确语法 - 我试图将click事件附加到每个单选按钮以更改<div>的可见性状态

  <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
  <script type="text/javascript" src="Scripts/jquery-1.4.1.js">
      $(document).ready(function () {
          $('#blue').click(function () {
              $('#two').hide();
              $('#one').show();
          });
          $('#orange').click(function () {
              $('#two').show();
              $('#one').hide();
          });
          $('#both').click(function () {
              $('.hide').show();
          });
          $('#none').click(function () {
              $('.hide').hide();
          });
      });
  </script>
  <style type="text/css"> 
      .hide{display:none;}
      ul li{list-style:none;}
  </style>

  </asp:Content>
  <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

          <div id="one" style="width:50px; height:50px; float:left; background:blue;" class="hide"></div>
          <div id="two" style="width:50px; height:50px; float:left; background:orange;" class="hide"></div>
          <hr style="clear:both;" />
          <ul>
              <li><input id="blue" type="radio" name="options" />Blue Div</li>
              <li><input id="orange" type="radio" name="options" />Orange Div</li>
              <li><input id="both" type="radio" name="options" />Both Divs</li>
              <li><input id="none" type="radio" name="options" />No Divs</li>
          </ul>

  </asp:Content>

2 个答案:

答案 0 :(得分:1)

忽略具有src属性的脚本标记内的内容,您必须为库和代码创建单独的标记。

  <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
  <script type="text/javascript">
      $(document).ready(function () {
          $('#blue').click(function () {
              $('#two').hide();
              $('#one').show();
          });
          $('#orange').click(function () {
              $('#two').show();
              $('#one').hide();
          });
          $('#both').click(function () {
              $('.hide').show();
          });
          $('#none').click(function () {
              $('.hide').hide();
          });
      });
  </script>

答案 1 :(得分:0)

Its working fine...........   
check the demo link.

http://jsfiddle.net/asimshahiddIT/w73eqr60/