點選變色樹

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

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>松樹</title>
    <style>

        div {
            margin-left: auto;
            margin-right: auto;
        }

        #contain {
            background: yellow;
        }

        #l1 {
            height: 0px;
            width: 0px;
            border-top: 0px;
            border-right: solid transparent 100px;
            border-bottom: solid green 100px;
            border-left: solid transparent 100px;
        }

        #l2 {
            height: 0px;
            width: 0px;
            border-top: 0px;
            border-right: solid transparent 150px;
            border-bottom: solid 150px;
            border-left: solid transparent 150px;
            border-bottom-color: green;
        }
        #l3 {
            height: 0px;
            width: 0px;
            border-top: 0px;
            border-right: solid transparent 200px;
            border-bottom: solid green 200px;
            border-left: solid transparent 200px;
        }

        #l4 {
            height: 200px;
            width: 100px;
            background: brown;

        }
    </style>

</head>

<body>
    <!-- <div id="tri"></div> -->
    <div id="contain">
        <div id="l1" onmouseup="mOut1()"></div>
        <div id="l2" onmouseup="mOut2()"> </div>
        <div id="l3" onmouseup="mOut3()"> </div>
        <div id="l4" onmouseup="mOut4()"> </div>
    </div>
     <script type="text/javascript">
            var c;
            var d;
        function mOut1(){
            var b = Math.ceil(Math.random()*7);
            switch(b){
                case 1:d="red";break;
                case 2:d="orange";break;
                case 3:d="yellow";break;
                case 4:d="green";break;
                case 5:d="cyan";break;
                case 6:d="blue";break;
                case 7:d="purple";break;
            }
            // document.getElementById("contain").style.bgColor=c;
            document.getElementById("l1").style.borderBottomColor=d;
        }
        function mOut2(){
            var b = Math.ceil(Math.random()*7);
            switch(b){
                case 1:d="red";break;
                case 2:d="orange";break;
                case 3:d="yellow";break;
                case 4:d="green";break;
                case 5:d="cyan";break;
                case 6:d="blue";break;
                case 7:d="purple";break;
            }
            // document.getElementById("contain").style.bgColor=c;
            document.getElementById("l2").style.borderBottomColor=d;
        }
        function mOut3(){
            var b = Math.ceil(Math.random()*7);
            switch(b){
                case 1:d="red";break;
                case 2:d="orange";break;
                case 3:d="yellow";break;
                case 4:d="green";break;
                case 5:d="cyan";break;
                case 6:d="blue";break;
                case 7:d="purple";break;
            }
            // document.getElementById("contain").style.bgColor=c;
            document.getElementById("l3").style.borderBottomColor=d;
        }
        function mOut4(){
            var b = Math.ceil(Math.random()*7);
            switch(b){
                case 1:d="red";break;
                case 2:d="orange";break;
                case 3:d="yellow";break;
                case 4:d="green";break;
                case 5:d="cyan";break;
                case 6:d="blue";break;
                case 7:d="purple";break;
            }
            // document.getElementById("contain").style.bgColor=c;
            document.getElementById("l4").style.background=d;
        }

    </script>s
</body>

</html>

點選變色樹

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>松樹&l

Vue.js指令小練習001 列表點選變色

需求：分析：給li繫結一個背景色樣式，當你點選這個li的時候，這個li背景色的樣式生效，其他的li背景色樣式不生效程式碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8

超連結按鈕點選變色，原來的連結恢復原色

視訊播放列表的超連結按鈕點選變色，原來的恢復原色，主要是讓使用者清楚的知道此刻播放的是哪一集。這裡所說的實現方法並不是利用css的link、hover、active所實現的，雖然css也能做到超連結點選變色，但是卻不能用到這裡的需求上，因為css實現的點選變色，是不能再點選頁面其他地方的，很顯然，看視訊的時候

vue點選變色

<template> <div> <router-link to="/w1">點選回去</router-link> <div v-for="(x,index) in list" v-bind:class="{red

zTree樹外掛實現點選左側樹，右側展示文章列表頁面實現思路

筆者新建了一個QQ群：571278542 。歡迎大家加入！上一篇文章中說了zTree樹外掛編寫過程。接來下，談談zTree樹外掛實現點選左側樹，右側展示文章列表頁面過程。效果展示 2.這裡就說說思路。 channel.jsp

jQuery 實現相同控制元件點選變色

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

AngularJS點選新增樣式、點選變色設定

首先解釋需求是這樣的，有個列表，當你點選哪一行時，哪一行背景變成灰色，在JQ中，大家都知道，這是非常容易的，加一個addClass就行了，那麼AngularJS如何實現呢？下面我們看程式碼部分 <!doctype html> <h

Androidstudio之TextView點選變色

使用環境： 1 文字資訊點選變色 1.1 點選變色，再點選恢復顏色 1.2 點選變色，鬆開恢復 1.1 處理方法： <TextView android:id="@+id/textWorker" android:layout

RadioButton的點選變色

Button的點選事件通過內部類方式 button = (Button) findViewById(R.id.button); button.setOnClickListener(new MyClickListener()); } private cl

android textview點選變色鬆開恢復或不恢復

一、textview 點選變色，鬆開恢復。效果如左圖：二、鬆開後不恢復。如右圖：一、textview 點選變色，鬆開恢復

【日常新手入門】android之點選變色

實現點選button改變button的顏色只需要在drawable中新增selector.xml檔案即可<selector xmlns:android="http://schemas.android.com/apk/res/android">

小程式列表點選變色

工作日誌隨手筆記僅供參考通過點選時候判斷點選的是哪一個，然後判斷item ==shopitem 使之變色<view class='shop_list' > <view class="shop_item{{item == shopitem?

在Android studio中設定按鈕點選變色效果的方法

一、在drawable下新建一個xml 名字"test" 程式碼如下： <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.androi

iOS UICollectionView 按鈕點選變色（收藏點贊功能）實現

1.前言專案需求要實現點選收藏功能，但是頁面資料進行了分頁功能，當載入了第二頁資料後，收藏按鈕的顯示就紊亂，具體原因是點選收藏後，請求收藏介面成功後要對資料進行重新整理，這個時候因為分頁的原因，載入過來的資料只是第二頁的(或者第一頁，反正只有一頁)，這

unity 滑鼠拖動物體旋轉點選變色拖動移動

public Camera camera; Ray ray; RaycastHit hitInfo; Vector3 offset; GameObject obj;//獲取點選到的物體 public GameObject tr

ListView的點選變色

我做了一個音樂播放器，其中用ListView顯示歌曲列表，當我點選某一首歌時，希望這首歌所在的item的背景顏色改變，以突出顯示所選擇的歌曲。首先我想到的是在ItemClickListener裡面寫，如下： private View forme

ImageButton加shape和selector實現簡單易懂的點選變色

在實際專案中經常會用到按鈕點選變色的效果,有很多種辦法,最近看到了一種新的寫法,比較簡單好理解上程式碼! main.xml <RelativeLayout xmlns:android="ht

【前端】angularJS或者jquery實現按鈕點選變色，再點選變回來

目的：使按鈕在兩種狀態之間切換，注意：簡單的通過.修改focus和active的樣式是做不到的。效果圖： html程式碼： <div class="col-1">

導航點選變色（防重新整理）純前臺程式碼實現

導航欄點選變色或者新增屬性時，由於頁面自動重新整理，往往效果很難讓人滿意！一般的做法就是判斷當前URL 通過匹配當前URL 來控制當前點選效果的實現還有一種方法是後臺實現的，具體怎麼做，這裡不做說

android-關於Button設定圓角之後不能點選變色的問題

####雖然不是很難的問題，但是對於自己琢磨是要花很多時間的（大神除外）。程式碼直接可以用。在drawable 裡建立selector 檔案，Button brackground屬性用， <?xml version="1.0" encoding="utf

點選變色樹

相關推薦