Change opacity of other images/linkbutton except the one selected_问答_开发者

I have 3 images which i included in a linkButton and 3 different tables which i've set the visibility to 'False'. Once i've clicked on the 1st image/linkButton, the other 2 images/link button's opacity will be change to a lighter one, and also my 1st table visiblity will be set to true. the same goes for the other 2 images/linkbutton.

so far what i've found are mostly for a href and not linkButton.i'm very new to jQuery and i would really appreciate if anyone could help me here.

this is what i've found, i wanted the same except it is for linkButton: http://jsfiddle.net/gCsRL/1/

when i try with the following code, i have no problem:

<a class="images"  href="#"><img class="click" src="Images/Level2.jpg" height="133"/><br/><br/></a>

but because i want a linkButton, i tried to add the asp:linkButton in, but is throwing me an error saying "Control 'lbl1' of type 'LinkButton' must be placed inside a form tag with runat=server."

<asp:LinkButton ID="lbl1" runat="server"><a class="images"  href="#"><img class="click" src="Images/Level1.jpg" height="133" /><br/><br/></a></asp:LinkButton>

my script:

<script>
$(document).ready(function() {
$('a.images').click(function() {
    // Make all images (except this) transparent
    $('a.images').not(this).stop().animate({ opacity: 0.4 }, 300);
    // Make this opaque
    $(this).stop().animate({ opacity: 1.0 }, 300);
});

});

i don't understand!!! can any kind soul out there help me please!!

-----EDIT-----

Ok it turns out i really didn't put the runat in form. i tried using a href instead now but when i added an id to it, the animation is not working.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="fades_test.aspx.vb" Inherits="fades_test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        $('a.images').click(function() {
            // Make all images (except this) transparent
            $('a.images').not(this).stop().animate({ opacity: 0.4 }, 300);
            // Make this opaque
            $(this).stop().animate({ opacity: 1.0 }, 300);
        });

    });
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="images" >
    <a class="images" href="#" runat="server" >
        <img class="click" src="Images/Level1.jpg" height="133" /><br />
        <br />
    </a>
    <a class="images" href="#" runat="server" id="img2">
        <img class="click" src="Images/Level2.jpg" height="133" /><br />
        <br />
    </a>
    <a class="images" href="#" runat="server" id="img3">
        <img class="click" src="Images/Level3.jpg" height="133" /><br />
        <br />
    </a></div>

<table>
    <tr>
        <td>
            <table id="tblLevel1" runat="server" visible="false" style="z-index: 100; left: 50px;
                position: relative; top: 0px;">
                <tr>
                    <td colspan="2">
                        <br />
                        <font color="gray" style="font-size: 16px;"><b>Level 1 Quality Policy & Quality Manual</b></font>
                    </td>
                </tr>
                ...
            </table>
            <table id="tblLevel2" runat="server" visible="false" width="650px" style="z-index: 100;
                left: 50px; position: relative; top: 0px;">
                <tr>
                    <td colspan="2">
                        <br />
                        <font color="gray" style="font-size: 16px;"><b>Level 2 QMS Procedures</b></font>
                    </td>
                </tr>
               ...
            </table>
            <table id="tblLevel3" runat="server" visible="false" width="650px" style="z-index: 100;
                left: 50px; position: relative; top: 0px;">
                <tr>
                    <td colspan="2">
                        <br />
                        <font color="gray" style="font-size: 16px;"><b>Level 3 QMS Forms</b></font>
                    </td>
                </tr>
                ...
            </table>
        </td>
    </tr>
</table>
</form>

the code behind:

 Protected Sub img1_ServerClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles img1.ServerClick
    tblLevel1.Visible = True
    tblLevel2.Visible = False
    tblLevel3.Visible = False
End Sub

Protected Sub img2_ServerClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles img2.ServerClick
    tblLevel1.Visible = False
    tblLevel2.Visible = True
    tblLevel3.Visible = False
End Sub

Protected Sub img3_ServerClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles img3.ServerClick
    tblLevel1.Visible = False
    tblLevel2.Visible = False
    tblLevel3.Visible = True
End Sub

here inside my div id="images", the 1st image that is without an id, is working properly, meaning it fades out the other 2 images but it is not showing me tblLevel1!!. for the 2nd n 3rd image that has an id, is not fading the other images but it is showing me the respective tables.

----------------EDIT-------------------------

i'm using Masterpage.master in this

<%@ Page Language="VB" AutoEventWireup="false" MasterPageFile="MasterPage.master" CodeFile="timg.aspx.vb" Inherits="timg" MaintainScrollPositionOnPostback="true"%>


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<br />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('a.images').click(function() {
            $('a.images').not(this).stop().animate({ opacity: 0.4 }, 300);
            // Make this opaque
            $(this).stop().animate({ opacity: 1.0 }, 300);

            //hide all tables   
            $('[id*=tblLevel]').hide();
            //show indexed tabled
            $('#tblLevel' + ($(this).index() + 1)).show();
        });
    });
</script>

        <table width="100%">
    <tr>
        <td align="center">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,40,0"
                width="1000" height="238" id="myMovieName">
                <param name="movie" value="SWF/ban_hse.swf" />
                <param name="quality" value="autohigh" />
                <param name="bgcolor" value="black" />
                <param name="”menu”" value="”false”" />
                <param name="FlashVars" value="”init=yes&check=true”" />
                <embed src="SWF/ban_hse.swf" width="1000px" height="238px" name="myMovieName" type="application/x-shockwave-flash"
                    pluginspage="http://www.macromedia.com/go/getflashplayer">
                </embed>
            </object>
        </td>
    </tr>
    <tr>
        <td align="center">
            <br />
            <font color="CornflowerBlue" style="font-size: 16px; font-family: CG Omega;"><b>Quality
                Management System</b></font>
        </td>
    </tr>
</table>
<br />
<table width="100%">
    <tr valign="top">
        <td width="3%"></td>
        <td width="17%">
            <div style="height: 35px">
                <asp:LinkButton ID="lblQMS" runat="server" Text="Quality Management System" ForeColor="gray"
                    Font-Bold="true" Font-Underline="false" Font-Names="CG Omega" Font-Size="16px"></asp:LinkButton></div>
            <div style="height: 35px">
                <asp:LinkButton ID="lblMBEA" runat="server" Text="Monthly BE Articles" ForeColor="gray"
                    Font-Bold="true" Font-Underline="false" Font-Names="CG Omega" Font-Size="16px"></asp:LinkButton></div>
        </td>
        <td>
<table width="100%">
    <tr align="center">
        <td colspan="2">
            <br />
            <strong>SOC- ISO 9001:2008 Certificate &nbsp;&nbsp;(16th Sep 2009 to 31st Aug 2012)</strong><br />
            Click <a href="HSE/QBE/Swiber_ISO 9001.2008 Certificate.pdf" target="_blank"><font
                color="blue"><u>here</u></font></a>&nbsp; to download
            <br />
            <br />
            <strong>ISO 9001-2008(E) QMS Requirements</strong><br />
            Click <a href="HSE/QBE/ISO 9001-2008(E) QMS Requirements.pdf" target="_blank"><font
                color="blue"><u>here</u></font></a>&nbsp; to download
        </td>
    </tr>
    <tr>
        <td align="center">
            <div id="div1">
                <a class="images" href="#">
                    <img class="click" src="Images/Level1.jpg" alt="" border="0" />
                    <br />
                    <br />
                </a><a class="images" href="#">
                    <img class="click" src="Images/Level2.jpg" alt="" border="0" />
                    <br />
                    <br />
                </a><a class="images" href="#">
             开发者_运维知识库       <img class="click" src="Images/Level3.jpg" alt="" border="0" />
                    <br />
                    <br />
                </a>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td>
                        <table id="tblLevel1" runat="server" style="z-index: 100; left: 50px; position: relative;
                            top: 0px; display: none;">
                            <tr>
                                <td colspan="2">
                                    <br />
                                    <font color="gray" style="font-size: 16px;"><b>Level 1 Quality Policy & Quality Manual</b></font>
                                </td>
                            </tr>
                            </table>

                        <table id="tblLevel2" runat="server" width="650px" style="z-index: 100; left: 50px;
                            position: relative; top: 0px; display: none;">
                            <tr>
                                <td colspan="2">
                                    <br />
                                    <font color="gray" style="font-size: 16px;"><b>Level 2 QMS Procedures</b></font>
                                </td>
                            </tr>
                             </table>                         
                        <table id="tblLevel3" runat="server" width="650px" style="z-index: 100; left: 50px;
                            position: relative; top: 0px; display: none;">
                            <tr>
                                <td colspan="2">
                                    <br />
                                    <font color="gray" style="font-size: 16px;"><b>Level 3 QMS Forms</b></font>
                                </td>
                            </tr>

                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</td>
</tr>
</table>

----------Source Code------------

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('a.images').click(function() {
            $('a.images').not(this).stop().animate({ opacity: 0.4 }, 300);
            // Make this opaque
            $(this).stop().animate({ opacity: 1.0 }, 300);

            //hide all tables   
            $('[id*=tblLevel]').hide();
            //show indexed tabled
            $('#tblLevel' + ($(this).index() + 1)).show();
        });
    });
</script>

    <table width="100%">
    <tr>
        <td align="center">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,40,0"
                width="1000" height="238" id="myMovieName">
                <param name="movie" value="SWF/ban_hse.swf" />
                <param name="quality" value="autohigh" />
                <param name="bgcolor" value="black" />
                <param name="”menu”" value="”false”" />
                <param name="FlashVars" value="”init=yes&check=true”" />
                <embed src="SWF/ban_hse.swf" width="1000px" height="238px" name="myMovieName" type="application/x-shockwave-flash"
                    pluginspage="http://www.macromedia.com/go/getflashplayer">
                </embed>
            </object>
        </td>
    </tr>
    <tr>
        <td align="center">
            <br />
            <font color="CornflowerBlue" style="font-size: 16px; font-family: CG Omega;"><b>Quality
                Management System</b></font>
        </td>
    </tr>
</table>
<br />
<table width="100%">
    <tr valign="top">
        <td width="3%"></td>
        <td width="17%">
            <div style="height: 35px">
                <a id="ctl00_ContentPlaceHolder1_lblQMS" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$lblQMS','')" style="color:Gray;font-family:CG Omega;font-size:16px;font-weight:bold;text-decoration:none;">Quality Management System</a></div>
            <div style="height: 35px">
                <a id="ctl00_ContentPlaceHolder1_lblMBEA" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$lblMBEA','')" style="color:Gray;font-family:CG Omega;font-size:16px;font-weight:bold;text-decoration:none;">Monthly BE Articles</a></div>
        </td>
        <td>
<table width="100%">
    <tr align="center">
        <td colspan="2">
            <br />
            <strong>SOC- ISO 9001:2008 Certificate &nbsp;&nbsp;(16th Sep 2009 to 31st Aug 2012)</strong><br />
            Click <a href="HSE/QBE/Swiber_ISO 9001.2008 Certificate.pdf" target="_blank"><font
                color="blue"><u>here</u></font></a>&nbsp; to download
            <br />
            <br />
            <strong>ISO 9001-2008(E) QMS Requirements</strong><br />
            Click <a href="HSE/QBE/ISO 9001-2008(E) QMS Requirements.pdf" target="_blank"><font
                color="blue"><u>here</u></font></a>&nbsp; to download
        </td>
    </tr>
    <tr>
        <td align="center">
            <div id="div1">
                <a class="images" href="#">
                    <img class="click" src="Images/Level1.jpg" alt="" border="0" />
                    <br />
                    <br />
                </a><a class="images" href="#">
                    <img class="click" src="Images/Level2.jpg" alt="" border="0" />
                    <br />
                    <br />
                </a><a class="images" href="#">
                    <img class="click" src="Images/Level3.jpg" alt="" border="0" />
                    <br />
                    <br />
                </a>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td>
                        <table id="ctl00_ContentPlaceHolder1_tblLevel1" style="z-index: 100; left: 50px; position: relative;
                            top: 0px; display: none;">
<tr>
    <td colspan="2">
                                    <br />
                                    <font color="gray" style="font-size: 16px;"><b>Level 1 Quality Policy & Quality Manual</b></font>
                                </td>
</tr>
</table>
   <table id="ctl00_ContentPlaceHolder1_tblLevel2" width="650px" style="z-index: 100; left: 50px;
                            position: relative; top: 0px; display: none;">
<tr>
    <td colspan="2">
                                    <br />
                                    <font color="gray" style="font-size: 16px;"><b>Level 2 QMS Procedures</b></font>
                                </td>
</tr>
</table>

                        <table id="ctl00_ContentPlaceHolder1_tblLevel3" width="650px" style="z-index: 100; left: 50px;
                            position: relative; top: 0px; display: none;">
<tr>
    <td colspan="2">
                                    <br />
                                    <font color="gray" style="font-size: 16px;"><b>Level 3 QMS Forms</b></font>
                                </td>
</tr>
</table>

If you're posting back only to make the tables visible or not then please view this updated fiddle:

http://jsfiddle.net/yjw3K/

Changes:

Visibility="false" - inside style tag: display:none;
Added code to show/hide tables on index.

If you still need to execute client code I would suggest looking into onClientClick which will execute client code and code behind code registered to the control.

*EDIT for clarity *

<script type="text/javascript">

var contentPlaceHolder = '#ctl00_ContentPlaceHolder1_';

$(document).ready(function(){
    $('a.images').click(function() {
        $('a.images').not(this).stop().animate({ opacity: 0.4 }, 300);
        // Make this opaque
        $(this).stop().animate({ opacity: 1.0 }, 300);

        //hide all tables   
        $('[id*=tblLevel]').hide();
        //show indexed tabled
        $(contentPlaceHolder + 'tblLevel' + ($(this).index() + 1)).show();
    });
});
</script>