JavaScript日曆選項卡-小記

阿新 • • 發佈：2018-11-23

這裡寫圖片描述

<style>
    ul {
        width: 500px;
        height: auto;
        overflow: hidden;
        background-color: #e5f4fd;
    }

    li {
        margin: 5px;
        list-style: none;
        float: left;
        text-align: center;
        width: 100px;
        background-color: aliceblue 
;
    }

    #textDiv {
        width: 500px;
        float: left;
        text-align: center;
        background-color: aliceblue;
        overflow: hidden;
        background-color: #e5f4fd;

    }

    li:hover {
        background-color: #60baed;
    }

    .div1 {
        overflow: hidden;
        background-color 
: #e5f4fd;

        width: 500px;
    }

    .active {
        color: #e84a7e;
    }
</style>
<script type="text/javascript">
    var aDatas = [
        "快過年了，大家可以商量著去哪玩吧～",
        "精通JavaScript開發課程 - 結課標準 - 有十條標準可讓大家修練成JS高手……",
        "HTML5開發課程，讓你熟練掌握移動應用開發技術",
        "精通各種DOM類應用，熟練掌握面向物件程式設計思想（OOP）、熟悉JS面向物件開發方式 - 智慧課堂 - www.zhinengshe.com" 
,
        "熟練掌握AJAX技術及相關應用（例如：新浪微博級應用） - 智慧課堂 - www.zhinengshe.com",
        "可以獨立寫出類似jQuery的小型庫（支援各類選擇符、事件類、DOM、自定義動畫animate、AJAX……） - 智慧課堂 - www.zhinengshe.com",
        "精通JS運動特效技術，能完整實現各類網站所有動畫特效，如 智慧課堂 官網 - 智慧課堂 - www.zhinengshe.com",
        "掌握JS除錯及優化技術、能相容所有瀏覽器 - 智慧課堂 - www.zhinengshe.com",
        "精通JS事件物件及事件的工作機制，並能完成各類跨平臺應用模組的開發 - 智慧課堂 - www.zhinengshe.com",
        "能獨立開發表現和效能都很優秀的RIA應用 - 智慧課堂 - www.zhinengshe.com",
        "瞭解後臺程式設計的相關知識，能夠和後臺工程師配合完成大型互動應用 - 智慧課堂 - www.zhinengshe.com",
        "熟悉正則表示式的編寫、應用及高階表單驗證技術 - 智慧課堂 - www.zhinengshe.com"
    ];
    window.onload = function () {
        var aDiv = document.getElementById('div1');
        var aTextDiv = document.getElementById('divtext');
        var aui = document.getElementById('aul');
        var aLi = aui.getElementsByTagName('li');
        alert(aLi[i]);
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].index = i;//給Li標籤定個標記
            //點選效果。
            aLi[i].onmousemove = function () {
                for (var i = 0; i < aLi.length; i++) {
                    aLi[i].className = '';
                }
                this.className = 'active';
                //改變每個div的值
                aTextDiv.innerHTML = '<h2>' + (this.index + 1) + '月活動</h2><p>' + aDatas[this.index] + '</p>';
            }
        }

    }
</script>
<body>
<div class="div1">
    <ul id="aul">
        <li class="active">
            <h2>一月</h2>
            <p>One</p>
        </li>
        <li><h2>二月</h2>
            <p>One</p>
        </li>
        <li><h2>三月</h2>
            <p>One</p>
        </li>
        <li><h2>四月</h2>
            <p>One</p>
        </li>
        <br>
        <li><h2>五月</h2>
            <p>One</p>
        </li>
        <li><h2>六月</h2>
            <p>One</p>
        </li>
        <li><h2>七月</h2>
            <p>One</p>
        </li>
        <li><h2>八月</h2>
            <p>One</p>
        </li>
        <li><h2>九月</h2>
            <p>One</p>
        </li>
        <li><h2>十月</h2>
            <p>One</p>
        </li>
        <li><h2>十一月</h2>
            <p>One</p>
        </li>
        <li><h2>十二月</h2>
            <p>One</p>
        </li>
    </ul>
    <div id="divtext">
        <h2>一月份</h2>
        <p>一月份天氣好</p>
    </div>
</div>
</body>
</html>

JavaScript日曆選項卡-小記

javascript實現選項卡切換的4種方法

ivar ack doc width -s utf tel 選項定義方法一：for循環+if判斷當前點擊與自定義數組是否匹配 <html lang="en"> <head> <meta charset="UTF-8"> &l

Dynamics CRM JavaScript 設定選項卡下面的節是否顯示

/************************************************************************** * 函式名：setSectionEnabledByName * 用途：設定選項卡下面的節是否顯示 * 引數： tabName選項卡的id,secti

javascript實現選項卡的兩種方式

方式一： <title>選項卡方式一</title> <style> div{ width: 15rem; height: 10rem; border: 1px solid red; } </style> </

HTML+JavaScript實現選項卡功能

選項卡，聽上去看上去都不太高大上。實際上呢，確實不高大上。但這玩意又是網站開發中必備的一個元素，這要不會的話，一個好的網站就有些困難了。說白了，這個無非就是通過js讓button和div之間發生關係，

Javascript實現簡單的選項卡

-a www 在線演示 == doc ++ style log rac 在線演示：http://jsfiddle.net/Web_Code/TbPDd/embedded/result/ <!DOCTYPE html PUBLIC "-//W3C//

javascript做的選項卡

on() 添加 -a round tel style element function i++ html部分 <div id="div1"> <input type="button" class="active" value="1"/>

純JS制作選項卡--JavaScript實例集錦（初學）

不用 () body tel bsp classname nload html spl 最近重新從最基礎學習JavaScript，如同蓋房，先要打好基礎，一磚一瓦都很重要。下面我來嘚吧幾句，附上從書上學到的實例與效果。 JS可以用面向過程去寫，也可以使用面向對象。面向對象

JavaScript插件制作-tab選項卡

++ doctype 500px clear win remove 制作 getattr hover JavaScript插件制作練習-鼠標劃過選項卡切換圖片 <!DOCTYPE html> <html> <head>

Javascript選項卡與傳參例項

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body>

JavaScript面向物件選項卡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/

JavaScript特效二（tab選項卡、百度輸入法下拉列表）

一.tab選項卡 window.onload=function(){ //獲取三個按鈕 var aInput = document.getElement

javascript+div樣式的自定義tab選項卡

需求：進入頁面以div樣式的選項卡顯示，預設顯示第一個，滑鼠移上事件（也可以更換為滑鼠點選事件）進行切換選項卡 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.

JavaScript網頁特效（三）選項卡切換的效果和輪播圖效果

選項卡的切換，主要是li列表的一個一個的選項卡，以及每個選項卡下的內容，點選的時候能夠一一對應，實現起來也不難。一：html佈局和css樣式選項卡標題使用ul..li無序列表，選項卡內容用三個div。 /* CSS樣式製作 */

前端 html+css+javascript 選項卡切換效果

效果圖： html程式碼： <div id="divPage" style="width:800px;height:750px;padding:10px;background:#fafafa;"> <p style="margin-b

JavaScript原生程式碼編寫選項卡Tab頁跳轉功能

本文主要介紹使用 JavaScript 原生程式碼編寫選項卡Tab頁的跳轉功能。一、先來看看效果圖二、準備文字素材文字素材選擇詩經裡面的三首古詩，分別是關雎、蒹葭和采薇《關雎》關關雎鳩，在河之洲

javascript 實現tab選項卡

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab選項卡</title> <style>

介紹下京東的（選項卡中的選項卡）是怎麽實現的

pad b- cti pre set red 二維數組 node int 我們都誰知道選項卡是通過數組實現的，那麽選項卡中的選項卡無非就是一個二維數組。道理邏輯很簡單，下面是我實現的一個方法： 1 <!DOCTYPE html> 2 <html

js自己定義插件-選項卡

.net char 例如 die 對象 tails gree eth end 該功能比較簡單。鞏固一下jquery插件寫法，註意引入的jquery.js 、自己定義插件路徑代碼例如以下：頁面： <!doctype html> <html>

滑動選項卡特效

ive ctype image images .com .html har -h head <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <

JavaScript日曆選項卡-小記

相關推薦