更改除所选图像之外的其他图像/链接按钮的不透明度

时间：2011-08-02 03:54:50

标签： javascript jquery asp.net

我有3个图像，我包含在linkBut​​ton和3个不同的表中，我将可见性设置为'False'。一旦我点击了第一张图片/ linkBut​​ton，其他2张图片/链接按钮的不透明度将变为较浅的一张，而且我的第一张桌面可见度也会设置为true。 其他2个图像/链接按钮也是如此。

到目前为止，我发现的主要是 a href 而不是 linkBut​​ton 。我是jQuery的新手，我真的很感激，如果有人能帮助我的话这里。

这是我发现的，我想要的是相同的，除了它是linkBut​​ton： http://jsfiddle.net/gCsRL/1/

当我尝试使用以下代码时，我没有问题：

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

但是因为我想要一个linkBut​​ton，我试图添加 asp：linkBut​​ton ，但是却给我一个错误，说“必须放置'LinkBut​​ton'类型的控件'lbl1'在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>

我的剧本：

<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);
});

});

我不明白!!!请有任何善良的灵魂帮助我！

- - - - - - - - 编辑

好吧事实证明我真的没有把runat放进去。 我现在尝试使用href，但是当我添加了一个id时，动画无效。

<%@ 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>

背后的代码：

 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

在我的div id =“images”里面，第一个没有id的图像正常工作，这意味着它淡出了其他2个图像，但它没有显示给我tblLevel1 !!。 对于具有id的第2个第3个图像，不会使其他图像褪色，但它会向我显示相应的表格。

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

我在这个

中使用了Masterpage.master 
<%@ 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>

----------源代码------------

    

<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>

1 个答案:

答案 0 :(得分：0)

如果您只是回发以使表格可见，那么请查看此更新的小提琴：

http://jsfiddle.net/yjw3K/

的变化：

  • Visibility="false" - 内部样式标记：display:none;
  • 添加了在索引上显示/隐藏表格的代码。

如果你仍然需要执行客户端代码，我建议调查onClientClick，它将执行客户端代码和代码注册到控件的代码。

* 为清晰起见编辑* 

<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>
相关问题
最新问题