JQuery學習——標籤頁效果一

來源:互聯網
上載者:User

按照慣例,我們還是先來看一下最終要達到:和上一個菜單效果類似,當滑鼠移動到標籤上的時候,下面會顯示相應的內容。當然,同樣存在滑動門的問題。 前台頁面的代碼:[html]  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="tab.aspx.cs" Inherits="tab" %>    <!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>      <link href="css/tab.css" rel="stylesheet" type="text/css" />      <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>      <script src="js/tab.js" type="text/javascript"></script>  </head>  <body>      <form id="form1" runat="server">      <div id="firstDiv">          <ul>              <li class="tabin">標籤一</li>              <li>標籤二</li>              <li>標籤三</li>          </ul>          <div class="contentin">              我是標籤一的內容</div>          <div>              我是標籤二的內容</div>          <div>              我是標籤三的內容</div>      </div>      </form>  </body>  </html>   tab.css[css]  ul,li  {      list-style:none;      margin:0;      padding:0;      }  li  {      background-color:#6E6E6E;      float:left;      color:White;      padding:5px;      margin-right:3px;       border: 1px solid white;         }  .tabin  {      border:1px solid #6E6E6E;      }  #firstDiv div  {      clear:left;      background-color:#6E6E6E;      width:200px;      height:100px;      display:none;      }  #firstDiv .contentin  {      display:block;      }   tab.js[javascript]  /// <reference path="jquery-1.9.1.min.js" />    $(document).ready(function () {        var setTimeouId;        $("#firstDiv li").each(function (index) {          $(this).mouseover(function () {              var nodeTabin = $(this);              setTimeouId = setTimeout(function () {                  $("#firstDiv .contentin").removeClass("contentin");                  $("#firstDiv .tabin").removeClass("tabin");                    $("#firstDiv div").eq(index).addClass("contentin");                  //我在這裡犯錯了哦,不應該再用this  this如果用在這裡的話那麼是指的window                  nodeTabin.addClass("tabin");              }, 300);          }).mouseout(function () {              clearTimeout(setTimeouId);          });      });  });             

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.