怎麼實現單擊span時給span新增邊框

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

說明：

1、開發環境 vs2012 asp.net mvc4 c#

1、效果圖

2、html 前端程式碼

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="MvcAppTest.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="ewJS/jquery.js"></script>
    <style type="text/css">
           .SelectItem {
            border:1px solid red;
        }
   .UNSelectItem {
        /*border:none; 
*/
        border:1px solid #73b2ff;
        }
      .resultHTML
        {
            width:370px;
            height:200px;
            float:left;
            background-color:#73b2ff;
            color:white;        
            z-index:1001;
            position:absolute;
            display 
:none;
            padding:10px 0px 0px 10px;
        }
         .span1
      {
       width:60px;
       font-size:18px;
       
       line-height:32px;
       height:32px;
       cursor:pointer;
       }
    </style>
    <script type="text/javascript">
        var countItem = 1;
        $(function () {
            test02();
            $(".span1").hover(function () {
                //var test3 = $("#span01").text();
                if (countItem>1) {
                    var display = $('#resultHTML').css('display');
                    if(display == 'none') {
                        $("#resultHTML").css('display', 'block');
                    }
                }
                else {
                    console.log('不是某某市');
                }

            }, function () {

            });
            $('#resultHTML').hover(function () { }, function () {
                var display = $('#resultHTML').css('display');
                if (display == 'block') {
                    $("#resultHTML").css('display', 'none');
                }
            });

        });
        function test02() {
            var userName = '1';
         
      
            var IsCity = false;
            var IsQu = false;
            var userData = { username: '100', pwd: '888888', officeID: -1 };//一定要寫在外面
            $.ajax({
                type: 'post',
                url: 'Home/Getdata',
                dataType: 'json',
                data: userData,
                success: function (result) {
                    if (result.length > 1) {
                        countItem = result.length;
                    };
                    var str = "<div>";
                    var item1 = "<div id='divCity' style='margin-bottom:5px;'>";
                    if (userName == "1") {
                        item1 += '<span area="0" id="' + -1 + '"  style=" font-size:16px;font-weight:bold;cursor:pointer;" onclick="test03(' + -1 + ', ' + '\'某某市\'' + ')" >' + '某某市' + '</span>';
                        IsCity = true;
                    }
                    item1 += "</div>";
                    str += item1;
                    var item2 = "<div id='divTown' style='font-size:14px;'>";
                    $.each(result, function (i, value) {
                        //if (value.IsALL != 1) {
                        item2 += '<span area="' + value.MapId + '" id="' + value.id + '" style="cursor:pointer;line-height:25px;display:block;float:left;margin-right:20px;" onclick="test03(' + value.id + ',' + '\'' + value.Name + '\'' + ')">' + value.Name + "</span>";
                        //}
                    });
                    item2 += "</div>";
                    str += item2;
                    str += "</div>";
                    $("#resultHTML").append(str);
                    if (result.length != 1) {
                        test03('-1');
                        $('#span01').html('<span style="height:31px;line-height:31px;font-size:18px;">某某市</span>');
                    }
                    else {
                        $('#dsj').hide();
                        test03(result[0].id);
                        $('#span01').html('<span style="height:31px;line-height:31px;font-size:18px;">' + result[0].Name + '</span>');
                    }
                },
                error: function (ex) {
                    //debugger;
                    // alert('error');
                    Console.log("Getdata方法執行錯誤" + ex);
                }
            });
        }
        function test03(officeID, OfficeName) {
    
            $('#span01').html('<span style="height:31px;line-height:31px;font-size:18px;">' + OfficeName + '</span>');
            var ItemDiv = document.getElementsByTagName("span");
            $.each(ItemDiv, function (i, value) {
                if (ItemDiv[i] != null) {
                    if (ItemDiv[i].getAttribute("id") != null) {
                        ItemDiv[i].className = "UNSelectItem";
                    }
                }
            });
            var selectedModel = document.getElementById(officeID);
            selectedModel.className = 'SelectItem';
     
        }
    </script>
</head>
<body>
      <div style="width:400px;height:31px;margin-bottom:10px;background-color:#73b2ff;color:white;line-height:31px;">
      <span id="span01" class="span1">某某市</span><img id="dsj" style="margin-left:10px;" src="img/dsj.png" />
      </div>
    <div id="resultHTML" class="resultHTML"></div>
</body>
</html>

3、Home控制器後臺程式碼

       [HttpPost]
        public JsonResult Getdata(string username, string pwd, string officeID)
        {
            int officeId = Convert.ToInt32(officeID);
            int data1 = Convert.ToInt32(username);
            List<townModel> myList = new List<townModel>();
            for (int i = 1; i < 30;i++ )
            {
               townModel model= new townModel();
               model.id = i;
               model.IsALL = i + 1;
               model.MapId = "100" + i.ToString();
               model.Name = "鄉鎮"+i.ToString();
               myList.Add(model);

            }
            return Json(myList, JsonRequestBehavior.DenyGet);

        }

  public class townModel
    {
        public Int32 id { get; set; }
        public string Name { get; set; }
        public Int32 IsALL { get; set; }
        public string MapId { get; set; }
    }

4、箭頭圖片

5、檔案下載

連結：https://pan.baidu.com/s/1m5zayibZnIYCARTKJ65rjQ
提取碼：15nl

怎麼實現單擊span時給span新增邊框

說明： 1、開發環境 vs2012 asp.net mvc4 c# 1、效果圖 2、html 前端程式碼 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.as

JQuery如何實現雙擊事件時不觸發單擊事件

art 屏蔽 settime 事件順序 tin on() () 延時單擊和雙擊事件的執行順序：單擊(click)：mousedown，mouseout，click；　　雙擊(dblclick)：mousedown，mouseout，click ， mou

JQuery如何實現雙擊事件時不觸發單擊事件，解決鼠標單雙擊沖突問題

方法 span eve 雙擊事件 col button null pan 綁定在jQuery的事件綁定中，如果元素同時綁定了單擊事件(click)和雙擊事件(dblclick),那麽執行單擊事件(click)時，不會觸發雙擊事件(dblclick)，執行雙擊事件(dbl

問題8：手機端實現點擊按鈕時更換顏色（解決IOS不顯示背景）

asc style cti focus 作用 cit art OS div CSS: .sval:active, .sval:focus{ background: #999;color:#fff;opacity：50; } 在觸屏上，:hover和:acti

zTree實現單擊展開樹

需要更改的部分如下： var setting = { view: { dblClickExpand: false//遮蔽掉雙擊事件 }, data: { simpleData: { enable: true } }, callback: { onClick: onClick } };

jQuery實現單擊某個標籤改變樣式

1、HTML程式碼，如下圖： <p class="sc_member_recharge_form"> <span class="selected">20元</span> <span >50元</span> <

JS輕鬆實現單擊文字框彈出選擇日期

// 主呼叫函式是 setday(this,[object])和setday(this)，[object]是控制元件輸出的控制元件名，舉兩個例子： // 一、<input name=txt><input type=button value=setday

bootstrap-table 實現單擊單元格可編輯

$(function(){ $('#table').bootstrapTable({ url:'data.json', columns:[ {field: 'id',title: 'ID'},

C#--第11周實驗--任務1（建立Windows窗體應用程式）--設計一個窗體--單擊按鈕時，在標籤上顯示當前系統時間 .

Android 手機通訊錄開發時給聯絡人新增頭像失敗的坑

在給聯絡人新增頭像程式碼 Bitmap photo = ...; // 將 Bitmap 轉為 byte[] byte[] bytes = LshImageUtils.bitmap2Bytes(photo); // 新增聯絡人, 插入名字和頭像 (LshC

MFC中實現單擊按鈕彈出對話方塊的方法

1、資源檢視-->Dialog-->右鍵-->新增資源-->新建-->對話方塊-->對話方塊按右鍵--新增類。例：新增CNewDlg類,在所要調的程式碼中(按鈕點選方法中),先加標頭檔案#include "CNewDlg.h ",之後

cocos2d-x 旅程開始--（實現單擊與長按）

if (turnLeftx->boundingBox().containsPoint(pTouch->getLocation())) //點選處座標在左轉按鈕區域中（這裡末尾加分號的話，會導致點哪裡都左移的情況） { turnLeft->setVisibl

C#--第11周實驗--任務1（建立Windows窗體應用程式）--設計一個窗體--單擊按鈕時，在標籤上顯示當前系統時間

jQuery實現單擊變換樣式

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>jQuer實現點選變換樣式</title> <style>*{marg

用imigick擴充套件給圖片新增邊框並且生成圖片

function set_border_image($image_url,$border_width,$border_height,$create_image_file){ $image = new Imagick(); //為了解決imagick無法讀取遠端圖片 $

android影象處理系列之五－－給圖片新增邊框（中）

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

android影象處理系列之六－－給圖片新增邊框（下）－圖片疊加

android影象處理系列之四－－給圖片新增邊框（上）

萬能的給 RecyclerView新增邊框線和圖片邊框線

/** * Created by 寶寶 on 2017/12/8. */ import android.content.Context; import android.content.res.TypedArray; import android.graphics.Can

Android-如何給View新增邊框，邊框顏色

有時候我們會碰到自定義按鈕的操作，那麼按鈕如何自定義？如果只是簡單的一條橫線或者豎線，直接使用TextView控制元件，寬或者高固定1dp，高或者寬match parent，在定義一個back

怎麼實現單擊span時給span新增邊框

相關推薦