更改其他圖像/鏈接按鈕的不透明度

我有3張圖片，其中包含linkButton和3個不同的表格，我已將其設置爲「False」。一旦我點擊了第一張圖片/ linkButton，其他兩張圖片/鏈接按鈕的不透明度就會變成較亮的一張，並且我的第一張桌面可見性將被設置爲true。其他2圖像/鏈接按鈕也是如此。更改其他圖像/鏈接按鈕的不透明度

到目前爲止，我所發現的大多爲A HREF而不是的LinkButton .i'm將jQuery非常新，我會很感激，如果有人可以幫助我在這裏。

這是我學到了什麼，我想一樣，除了它是LinkButton的： http://jsfiddle.net/gCsRL/1/

當我用下面的代碼試試，我沒有問題：

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

但由於我想添加一個linkButton，我試圖添加asp：linkButton，但是卻給我一個錯誤，說「'LinkButton'類型的'Control'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內= 「圖像」，即沒有ID的第一圖象，工作正常，這意味着它淡出其他2個圖像，但它不顯示我tblLevel1 !!。對於第二個具有id的第三個圖像，不會淡化其他圖像，但會顯示相應的表格。

----------------編輯-------------------------

我正在使用母版頁。掌握本

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

來源

2011-08-02 ymcCole

您是否嘗試過加入FORM標籤錯誤消息告訴你什麼？ – Tomm

我真的是一個白癡!!!我沒有一個表格標籤!!!!我已經添加了它，但stil我有問題..請幫助 – ymcCole

如果您發佈的內容只是爲了使表格可見或不可見，請查看此更新的提琴：

http://jsfiddle.net/yjw3K/

變化：

Visibility="false" - style標籤內部：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>

來源

2011-08-02 10:27:23 f0x

非常感謝你，那就是我想要的是。現在的問題是，當我在我身邊嘗試時，褪色不起作用，沒有顯示錶格。這裏有什麼問題？我是否缺少任何參考或任何內容？ **我已經發布了上面的確切代碼，任何人都可以告訴我什麼是錯誤的代碼?? **謝謝你！ – ymcCole

我已經添加了'$（document）.ready（function（）{//您的腳本}）;'它工作得很好。請參閱我的編輯。 – f0x

謝謝!!!該行做到了，並且正在工作!!!但是現在我還有一個問題，如果我有一個Masterpage.master，似乎沒有工作。當我用asp：Content代替html，head和form標記時，淡入淡出的作品，但它沒有顯示我的表格。我已經編輯了上面的代碼，請幫助！ – ymcCole

更改其他圖像/鏈接按鈕的不透明度

回答

相關問題