2. 程式人生 > >分步驟實現操作

分步驟實現操作

阿新 • • 發佈：2019-01-02

最近想實現如圖介面，百度半天沒有得到結果於是自己寫了一個
這裡寫圖片描述

html程式碼如下


<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>流程</title>
<script type="text/javascript" src="jquery-1.8.3.min.js" ></script>
<style type="text/css"
 
>
*{ margin:0px; padding:0px;}
.you{
     display:inline; 
     height:200px; 
     width:300px;
     background-color:#00A5A5;
     float:left;
    }
.wu{
     display:inline; 
     height:200px; 
     width:300px;
     float:left;
    }
.zhan{
     display:inline; 
     height:200px; 
     width:200px;
     background-color
 
:#fff;
     float:left;
    }
.zheng{
     display:inline; 
     height:0px; 
     width:0px;
     border:100px solid #000;
     border-color:transparent transparent transparent #00A5A5;
     border-style:solid solid solid dashed; 
     line-height:0px;
     float:left;
     }
.fan{
     display:inline; 
     height
 
:0px; 
     width:0px;
     border:100px solid #000;
     border-color:#00A5A5 #00A5A5 #00A5A5 transparent;
     border-style:solid solid solid dashed; 
     line-height:0px;
     float:left;
    }
.zhong{
    position:relative;
    top:50%;
    left:30%;
    }
</style>

</head>
<body>
    <div>
        <div id="one" class="you">
            <p class="zhong">查詢教學成果</p>
            </div>
        <div id="two" class="zheng"></div>
        <div id="three" class="wu"><p class="zhong">登記教學成果</p></div>
        <div id="four" class="zhan"></div>
        <div id="five" class="wu"><p class="zhong">確認提交</p></div>
    </div>

    <div id="first" style="clear:left; display:block;">
    <input type="button" id="next" value="下一步" onclick="firstNext()"></input>
    </div>

    <script type="text/javascript">
        function firstNext(){
            $("#one").css("background-color","#fff");
            $("#two").removeClass("zheng");
            $("#two").addClass("fan");
            $("#three").css("background-color","#00A5A5")
            $("#four").addClass("zheng");

            $("#first").css("display", "none");
            $("#second").css("display", "block");
            $("#third").css("display", "none");
        }
    </script>

    <div id="second" style="clear:left; display:none;">
    <input type="button" id="previous" value="上一步" onclick="secondPrevious()"></input>
    <input type="button" id="next" value="下一步" onclick="secondNext()"></input>
    </div>

    <script type="text/javascript">
        function secondPrevious(){  
            $("#one").css("background-color","#00A5A5");
            $("#two").removeClass("fan");
            $("#two").addClass("zheng");
            $("#three").css("background-color","#fff")
            $("#four").removeClass("zheng");

            $("#first").css("display", "block");
            $("#second").css("display", "none");
            $("#third").css("display", "none");
        }

        function secondNext(){
            $("#two").removeClass("fan");
            $("#three").css("background-color","#fff");
            $("#four").removeClass("zheng");
            $("#four").addClass("fan");
            $("#five").css("background-color","#00A5A5");

            $("#first").css("display", "none");
            $("#second").css("display", "none");
            $("#third").css("display", "block");
        }
    </script>

    <div id="third" style="clear:left; display:none;">
    <input type="button" id="previous" value="上一步" onclick="thirdPrevious()"></input>
    <input type="button" id="next" value="提交" onclick="thirdNext()"></input>
    </div>  

    <script type="text/javascript">
        function thirdPrevious(){   
            $("#five").css("background-color","#fff");
            $("#four").removeClass("fan");
            $("#four").addClass("zheng");


            $("#two").removeClass("zheng");
            $("#two").addClass("fan");
            $("#three").css("background-color","#00A5A5")
            $("#four").addClass("zheng");

            $("#first").css("display", "none");
            $("#second").css("display", "block");
            $("#third").css("display", "none");
        }

        function thirdNext(){

        }
    </script>

</body>
</html>

相關推薦

分步驟實現操作

最近想實現如圖介面，百度半天沒有得到結果於是自己寫了一個 html程式碼如下 <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/h

SQLServer2000同步複製技術實現操作步驟

一、 預備工作 1.釋出伺服器,訂閱伺服器都建立一個同名的windows使用者,並設定相同的密碼,做為釋出快照資料夾的有效訪問使用者 --管理工具 --計算機管理 --使用者和組 --右鍵使用者 --新建使用者 --建立一個隸屬於administrator組的登陸wi

基於Oracle資料庫，用SSM框架和easyUI實現分頁查詢操作

基於Oracle資料庫，用SSM框架和easyUI來實現分頁查詢操作： 第一步，首先擬定好資料庫中的表，在eclipse裡面用maver專案搭配好SSM框架(其中關於SSM框架的pom.xml，spring-mvc.xml，spring-bean.xml，以及webapp目錄下的WEB-INF

jsp入門教程：7個步驟實現JSP的分頁顯示

本期的jsp入門學習內容：實現JSP分頁顯示的方法。今天給大家帶來實現jsp分頁顯示的程式碼，簡單的7個步驟就可以實現JSP的分頁顯示，有需要的朋友可以參考一下，學習些jsp開發的知識。 正式開始此次的jsp入門教程的學習： 1、MySQL的limit關鍵字 (DAO

JS實現操作成功定時回到主頁效果

div www char ext 原因 元素 not img javascipt 效果圖： 頁面代碼 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF

Spring分頁實現PageImpl<T>類

sea equals public ini ack format contain link 部分 Spring框架中PageImpl<T>類的源碼如下： /* * Copyright 2008-2013 the original author or aut

電壓跟隨器加電阻分壓實現降壓

系統 輸入 實現 最大 技術分享 .com 需要 img -1 實現分壓最簡單的方法就是用電阻進行分壓，如下圖： 但這樣做有一個最大的問題：輸出電阻很大，接入負載會改變分壓值，也就是說，在任何分壓電路需要一定電流的應用中都不能使用 加一個電壓跟隨器可以解決這個問題，運放的

Python 實現操作文檔的讀取，續寫，覆蓋重寫自動備份

python 文檔讀寫# coding:utf-8 import time # 備份文件的時間格式化和操作暫停使用 import shutil # 作為文件備份使用 # 需求說明 """ # 需求： # 1、可輸入文檔路徑名稱； # 2、文本自動換行輸入； # 3、文本自動保

symfony分頁實現方法

ont param creat com render 實現 使用 ext urn 1.symfony分頁是要用到組件的，所以這裏使用KnpPaginatorBundle實現翻頁 2. 用composer下載 在命令行中： composer require "

分治法實現矩陣乘法

name cout namespace size cas put 分治 ade add 整體的思路就是分，加&乘，拼 #include <iostream> #include <cstddef> #include <cstdlib&g

Jmeter_實現操作postgresql數據庫

type 需要 技術 操作類 采樣 conn 實現 set tps 【環境】 　　①Jmeter版本：3.2，JDK：1.8； 　　②postgresql驅動包postgresql-9.3-1103.jdbc4，將該jar包置於..\apache-jmeter-3.2\li

S/4HANA和CRM Fiori應用的搜索分頁實現

odata .com 加載 aging alt -o gen rip adl 在我的博客Paging Implementation in S/4HANA for Customer Management 我介紹了S/4HANA for Customer Management裏

Smarty的分頁實現

inside fetch 數據 etc ber page arr quest vars Smarty中的分頁有很多方法。1。使用Smarty的分頁插件，如Pager,pagnition,sliding_page等，不過感覺都不是太好，幾乎都有一些Bug。有興趣試用和自己去改

Sql Server系列：分區表操作

red 可伸縮 ID 不同 一個 edate pan 添加分區 必須 1. 分區表簡介 　　分區表在邏輯上是一個表，而物理上是多個表。從用戶角度來看，分區表和普通表是一樣的。使用分區表的主要目的是為改善大型表以及具有多個訪問模式的表的可伸縮性和可管理性。 　　分區表是把數據

MiniUI前臺分頁，假分頁實現源碼

MiniUI 假分頁背景對於數據較少，無需後臺分頁的需求，可使用以下解決方案方案MiniUI提供了監聽事件，特別方便即可實現。源碼mini.parse(); var grid = mini.get("datagridTable"); // 獲取所有數據和總記錄數 { tot

laravel 5.5 倉庫模式 文件之間接口與實現操作

使用方法 行數 實現 pan 註冊 AR reg php 需要 倉庫模式 最直接的意思就是： Eloquent數據（數據庫）查詢 方便快捷，簡單明了。自己怎麽寫的，就怎麽去調用，完全ok~ 本質意思： 倉庫就像是業務內部的數據對象集合，負責協調業務和數據映射層之間的關

支付寶開放平臺—開發中心—沙箱環境—詳細步驟與操作說明

.bat png AS mda ref bat 詳細步驟 class 配置 1.第一步：要註冊企業賬號或者個人支付寶賬號，使用企業賬號或者個人賬號進行登錄的開放平臺。 2.第二步：首次進入系統界面有三個選項，用戶可以根據個人自由選擇第一項，第二項或者第三項的入住。 3.

【原創】阿裏雲RDS數據庫超大表分區實現

cpu bind 實現 表分區 HR 表數 alt bold inf [背景] 一張數據量約1億條數據的表，由於最初設計疏忽，未做分區，現需要根據創建時間字段來做分區； 業務要求，該表僅需要保留3個月的數據，數據量在9千萬~1億3千萬左右； 業務允許短時間停機，10分鐘左

Laravel 手動分頁實現

else spa path http java 處理 inf RR laravel Laravel 手動分頁實現 基於5.2版本 在開發過程中有這麽一種情況，你請求Java api獲取信息，由於信息較多，需要分頁顯示。Laravel官方提供了一個簡單的方式paginat

PPT分屏放映操作小技巧

mar 鼠標 宣講 進度 term ffice 註意 講解 pre 一、環境需求： 硬件：筆記本電腦、投影儀 軟件：Windows XP、Windows Vista、Windows 7 ; powerpoint 二、設置步驟： 1、 操作系統設置： a、打開電腦