怎么实现单击span时给span添加边框

说明：

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;" οnclick="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;" οnclick="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

转载于:https://www.cnblogs.com/net064/p/10265943.html

怎么实现单击span时给span添加边框相关推荐

编写Java程序，在屏幕上显示带标题的窗口，并添加一个按钮。当用户单击按钮时，结束程序。
编写Java程序,在屏幕上显示带标题的窗口,并添加一个按钮.当用户单击按钮时,结束程序. package p3;import java.awt.event.ActionEvent; import ja ...
jsp ul设置滚动条_jquery实现Li滚动时滚动条自动添加样式的方法
本文实例讲述了jquery实现Li滚动时滚动条自动添加样式的方法.分享给大家供大家参考.具体如下: 这里使用jquery实现当拖动滚动条的时候,Li滚动列表中的内容会自动随滚动条变化而下移,并自动添加 ...
如何在单击按钮时启动新活动
在Android应用程序中,如何在单击另一个活动中的按钮时如何启动新活动(GUI),以及如何在这两个活动之间传递数据? #1楼伊曼纽尔我认为应该在开始活动之前放置额外的信息,否则,如果您正在Nex ...
在唯一密钥属性“name”设置为“Application”时，无法添加类型为“add”的重复集合项...
配置一个网站后,出现[在唯一密钥属性"name"设置为"Application"时,无法添加类型为"add"的重复集合项]这个错误,记得之前 ...
python的span方法_Python Span.set_extension方法代码示例
# 需要导入模块: from spacy.tokens import Span [as 别名] # 或者: from spacy.tokens.Span import set_extension [a ...
powerdesigner生成表sql语句时，统一添加默认字段（生成时间、生成人等）
powerdesigner生成表sql语句时,统一添加默认字段文章目录 powerdesigner生成表sql语句时,统一添加默认字段方式一:配置创建表默认字段: 方法二:创建表模型后执行vb语句 ...
html表格输入框怎么左移动,当我向CSS中的文本框添加边框时，HTML表单输入会移动...
我想在登录表单上的输入字段中添加边框,但是当我添加边框时:1px纯黑色;到#登录表单输入,然后所有的文本框移出位置.当我向CSS中的文本框添加边框时,HTML表单输入会移动当用户输入不正确的凭据到表 ...
单击Artwork时没有弹窗的问题
单击Artwork时没有弹窗的问题今天在生成Gerber时发现怎么单击Artwork,就是像照相机图标的那个东西,都没有弹出曾经熟悉的弹窗,虽然Art文件是生成了,但是没有这个弹窗的信息反馈让我感觉 ...
按住ctrl键多选_解决烦恼：按住Ctrl键单击选择时，阻止Windows意外复制文件
按住ctrl键多选 Have you ever tried to select a bunch of files in Windows Explorer while holding down the ...

怎么实现单击span时给span添加边框

怎么实现单击span时给span添加边框相关推荐

最新文章

热门文章