2. 程式人生 > >學習“javaScript+CSS+DIV實現下拉選單，實現表格變色”內容的筆記

學習“javaScript+CSS+DIV實現下拉選單，實現表格變色”內容的筆記

阿新 • • 發佈：2018-12-14

實現下拉選單

<!DOCTYPE html> <html>   <head>     <title>下拉選單示例</title>     <script language="javaScript">     //當滑鼠移動到選單選項的時候顯示對應的DIV     function show(menu){         document.getElementById(menu).style.visibility="visible";}     //當滑鼠移出的時候隱藏所有的DIV     function hide(){         document.getElementById("menu1").style.visibility="hidden";         document.getElementById("menu2").style.visibility="hidden";         document.getElementById("menu3").style.visibility="hidden";     }     </script>   </head>      <body>    <table>      <tr bgcolor="#9999FF" align="center">      <td width="120" onMouseMove="show('menu1')" onMouseOut="hide()">系列課程</td>      <td width="120" onMouseMove="show('menu2')" onMouseOut="hide()">教學課件</td>      <td width="120" onMouseMove="show('menu3')" onMouseOut="hide()">課程大綱</td>      </tr>      </table>      <div id="menu1" onMouseMove="show('menu1')" onMouseOut="hide()"           style="background:#9999FF;position:absolute;left:12px;top:38px;width:120px;           visibility=hidden">           <span>c++程式設計</span><br>           <span>java程式設計</span><br>           <span>c#程式設計</span><br>      </div>      <div id="menu2" onMouseMove="show('menu2')" onMouseOut="hide()"           style="background:#9999FF;position:absolute;left:137px;top:38px;width:120px;           visibility=hidden">           <span>c++課件</span><br>           <span>java課件</span><br>           <span>c#課件</span><br>      </div>      <div id="menu3" onMouseMove="show('menu3')" onMouseOut="hide()"           style="background:#9999FF;position:absolute;left:260px;top:38px;width:120px;<!--注意是：，以及px-->

          visibility=hidden">           <span>c++教學大綱</span><br>           <span>java教學大綱</span><br>           <span>c#教學大綱</span><br>      </div>   </body> </html>

實現表格變色

<!DOCTYPE html> <html>   <head>     <title>變色表格示例</title>     <script language="javaScript">       function changeColor(row){          document.getElementById(row).style.backgroundColor='#CCCCFF';       }       function resetColor(row){          document.getElementById(row).style.backgroundColor='';       }     </script>   </head>      <body>     <table width="200" border="5" cellpadding="1" align="center"><!-- cellpadding規定單元邊沿與其內容之間的空白，實際上就是格子裡面空白部分的多少 -->

     <tr><th>學校</th><th>專業</th><th>人數</th></tr>      <tr align="center" id="row1"            onMouseOver="changeColor('row1')" onMouseOut="resetColor('row1')">            <th>北大</th><th>法律</th><th>2000</th>      </tr>      <tr align="center" id="row2"            onMouseOver="changeColor('row2')" onMouseOut="resetColor('row2')">            <th>清華</th><th>計算機</th><th>5000</th>      </tr>      <tr align="center" id="row3"            onMouseOver="changeColor('row3')" onMouseOut="resetColor('row3')">            <th>人大</th><th>經濟</th><th>6000</th>      </tr>     </table>   </body> </html>

相關推薦

學習“javaScript+CSS+DIV實現下拉選單，實現表格變色”內容的筆記

實現下拉選單 <!DOCTYPE html> <html>   <head>     <title>下拉選單示例</title>     <script language="javaScript">  

經典的 div + css 滑鼠 hover 下拉選單

經典的 div + css 滑鼠 hover 下拉選單 效果圖： 原始碼： <html> <head> <meta charset="utf-8"> <style type="text/css"> nav {

css實現下拉選單

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul{ list-style: none

純CSS、原生JS、jQuery實現下拉選單功能

一、純CSS實現 實現下拉選單需要用display，即改變display的block或none值。 先構建基本的HTML框架， <div id="nav"> <ul> <li><a href="#">

用CSS實現下拉選單功能(過於冗餘，此方法不建議)

<style> .dropdown{ position:relative; display:inline-block; } .dropbtn{ background-color:#4CAF50; color:white; padding:16

css實現下拉選單以及下拉箭頭旋轉效果

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>下拉選單動畫製作</title><style>*{margin:0;pa

純CSS實現下拉選單導航

        前言：本題是網易雲課堂的前端微專業《頁面製作》課程的作業題，當時對題意理解錯誤沒有實現題目要求，成了心中永遠的痛，所謂念念不忘必有迴響，在學校圖書館花了幾個小時做出來並對相關知識點進行了總結，寫了這篇博文。好，進入正題。 －－－－－－－－－－－－－－－－

純css製作導航下拉選單

 轉載文章，覺得作者思路很好  <nav>         <ul>         

實現下拉選單多選框效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <li>工作意願地： <%-- <c:forEach items="${list}" var="lis

建立一個純CSS下拉選單，支援三級選單

我們將建立兩個子類別特性,父懸停啟用連結。 第一級sub-links主要出現在導航欄,然後第二個級的連結從第一個下拉飛出水平。 HTML 123456789101112131415161718192021222324<nav><

bootstrap實現下拉選單需要的連結引入

我理解的bootstrap框架就是定義了一些常用HTML元素的樣式，把bootstrap包匯入到HTML後，不必自己定義樣式，可以直接引用定義好的樣式。      我理解bootstrap框架就是定義了一些常用HTML元素的樣式，把bootstrap包匯入到HTML後，不必自

iOS下拉選單效果實現

原文地址：https://www.jianshu.com/p/d1b7ebba9ac7控制元件的屬性以及介面：/* 主按鈕 可以自定義樣式 可在.m檔案中修改預設的一些屬性 */ @property (nonatomic,strong) UIButton * mainBtn

iOS點選下拉選單的實現（利用UITableView + UIButton + UILabel）

我們在學習的過程中，可能會遇到需要新增下拉選單功能的時候，有的小夥伴可能一時半會想不出來怎樣實現，那麼我今天就來給大家分享一下我的方法 先看一下效果圖 左邊是一個UIButton，點選前是如下效果 這是點選星期三後的效果 這樣，就實現

微信小程式實現下拉選單

點選對應上面的tab選中 <view class='nav-wrapper'> <view class='nav-container'> <view class="scroll_box"> <scroll-view cla

android上拉選單和下拉選單的實現

android關於下拉選單功能網上有很多實現demo，但我想要的是上拉選單，如下圖： 說勉強是剛好滿足自己的需求，而不能大眾化，如上圖中只有將Button等控制元件至於佈局底部才能實現理想效果。 demo原始碼見：

用bootstrap做下拉選單，並使用jQuery實現從伺服器載入下拉選單的item。

用bootstrap做下拉選單，並使用jQuery實現從伺服器非同步載入下拉選單的item。 前臺程式碼： <div class="form-group">

用PopupWindow實現下拉選單

首先附上效果圖 首先寫好佈局檔案，一共四個分別為:activity_main.xml 主介面佈局，header.xml 裡面其實也就一個選單Button  待會要放到主佈局中，list.xml放置lisetView的佈局檔案，list_item.xml  ListVie

用JS實現下拉選單的聯動

需求：用JS實現一個下拉選單，要求在選中“地區”選單中相應的地區時，自動在“國家”選單中 出現相應的國家。 <!DOCTYPE html> <html> <head&g

js實現下拉選單提交表單後停留在選中option

<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html

彈出式選單（下拉選單）實現——PopupMenu

PopupMenu代表彈出式選單，它會在指定元件上彈出PopupMenu，預設情況下，PopupMenu會顯示在該元件的下方或上方。PopupMenu可增加多個選單項，並可為選單項增加子選單。 使用PopupMenu建立選單的步驟非常簡單，只要如下步驟即可。 呼叫new PopupMenu(Context c