开发者

Jquery click function not working

jQuery is not working with the pop-up div. What happens is when i click on any of the Click Me text, the pop-up div is shown. Then i click on either one or two and nothing happens!? If i click on one, two should disappear and vice versa.

Copy the code below and try for yourself. What's the solution?

  <html>
    <head>
    <style type="text/css">
    .ratecontainer {
    display:block;
    float:left;
    height:40px;

    }
    .ratecontainer a {
    color:#FFFFFF;
    text-decoration:none;

    }

    .ratebutton1 {
    padding:5px;
    color:#FFFFFF;
    cursor:pointer;
    background-color:#59758d;
    }

    .ratebutton1:hover {
    background-color:#4a6f8e;

    }
    .ratebutton2 {
    padding:5px;
    color:#FFFFFF;
    cursor:pointer;
    background-color:#59758d;
    }

    .ratebutton2:hover {
    background-color:#4a6f8e;

    }

    #info {
    position:absolute;
    text-align:left;
    width:950px;
    height:auto;
    top:100px;
    left:50%;
    z-index:20;
    margin-left:-475px;

    border:1px solid #000000;
    background-color:#FFFFFF;
    display: none;


    }

    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>

    <body>
    <script type="text/javascript">
    $(function() {

        $('.ratebutton1').click(function() {

            $('.ratebut开发者_运维问答ton2').hide();

        });

        $('.ratebutton2').click(function() {

            $('.ratebutton1').hide();

        });

          $('.infobutton').click(function() {

var id = $(this).attr('id');
var row = '#box'+id;

$('#info').css('display','block');
var ninfo = $(row).html();
$('#info').html(ninfo);
});

    });



    </script>

     <div id="info"></div>


<div class="menucontainer"><a id="0" class='infobutton'>Click Me </a></div>
<div style="display:none;" id="box0">

    <div class="ratecontainer">
        <form  action="">
            <a class="ratebutton1">One</a><a class="ratebutton2">two</a>
        </form>
    </div>



</div>

    </body>
    </html>


I created a stub fiddle for your code: http://jsfiddle.net/guard/P4KYL/

Edit it removing any php-related cruft (and manually put multiple items where necessary)

Then post the edited version back and I'll check what's wrong with it.


    $('.ratebutton1').click(function() {

        $('.ratebutton2').hide();

    });

Right here is one issue I believe. Your buttons are not named .ratebutton1 but rather ratebutton1. Take out the period and try it. Hope it helps

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜