关于data-属性

现有需求如下,也就是类似做一个tab页的切换如下图:

因为这里要记录一下jquery里的“data-属性”的用法,所以忽略类似的组件。

往HTML标签上添加任意以 "data-自定义名称"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。而读取数据的时候data(自定义名称)就可以取到值了。

后台:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace Test160108.Controllers
{
public class DuController : Controller
{
//
// GET: /Du/ public ActionResult Index()
{
return View();
} [HttpPost]
public ActionResult List()
{
List<Person> person = new List<Person>();
for (int i = ; i < ; i++)
{
person.Add(new Person()
{
Id=i,
Name="TESTNAME"+i,
Remark = "这是第"+i+"条纪录"
});
}
return Json(person, JsonRequestBehavior.AllowGet);
} public class Person
{
public int Id { get; set; } public string Name{ get; set; } public string Remark { get; set; }
}
}
}

后台模拟数据

前台:

 @{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#showBtn").click(function () {
$.ajax({
type: "post",
url: "/du/list",
success: function (data) {
console.log(data);
if (data.length > ) {
$.each(data, function (index, value) {
// console.log(index);
$("#ul4Names").append("<li data-key=\" " + index + " \" class=\"li4Names\" <a href=\"javascript:;\">" + value.Id + "</a></li>");
});
$(".li4Names").click(function () {
$(this).css("background-color", "#00ced1").siblings().css("background-color", "white");
// alert(data[$(this).data("key")].Name);
$("#rightDiv table tbody tr td.tdName").html(data[$(this).data("key")].Name);
$("#rightDiv table tbody tr td.tdRemark").html(data[$(this).data("key")].Remark);
});
}
}
});
});
});
</script>
<title>Index</title>
</head>
<body>
<div>
<button id="showBtn">出现</button>
</div>
<div>
<div id="left" style="width: 10%; float: left">
<ul id="ul4Names">
</ul>
</div>
<div id="rightDiv" style="margin-left: 35px;">
<table>
<thead>
<tr>
<td>名称</td>
<td>备注</td>
</tr>
</thead>
<tbody>
<tr>
<td class="tdName"></td>
<td class="tdRemark"></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

前台 data-属性

效果:

关于data-属性的更多相关文章

  1. JS组件系列——使用HTML标签的data属性初始化JS组件

    前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...

  2. 【wpf】Path画扇形以及Path的Data属性的理解

    <Path x:Name="PathFillColor" Fill="{TemplateBinding Property=Button.Background}&qu ...

  3. HTML data属性简介以及低版本浏览器兼容算法

    实例 使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...

  4. data属性

    本框架内置组件以及部分插件可以通过data属性来初始化并使用,通常通过data-toggle来调用API(toggle是触发器的意思,例如我们创建一个navtab标签可以通过为a的data-toggl ...

  5. HTML 5:你必须知道的data属性

    原文:All You Need to Know About the HTML5 Data Attribute 译文:你必须知道HTML 5 的Data属性 译者:dwqs HTML 5的Data属性可 ...

  6. Intent的属性及Intent-filter配置——实例Action、Data属性启动系统Activity

    一旦为Intent同时指定了Action.Data属性,那么Android将可根据指定的数据类型来启动特定的应用程序,并对指定数据类型执行相应的操作. 下面是几个Action属性.Data属性的组合. ...

  7. Bootstrap入门(二十四)data属性

    Bootstrap入门(二十四)data属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码.这是 Bootstrap 中的一 ...

  8. ajax data属性传值的方式总结

    在和后台同事对接口的时候,有一个小问题一直困扰着我.那就是用ajax请求后台接口数据,需要用data属性传值的时候,data属性传值的方式感觉没有统一用一种方式. 后来仔细想想,其实哪种方式都可以,主 ...

  9. 利用data属性来存json、和取数据还原json

    data属性用JSON.stringify转化为字符串存进去,,,取出来自动会变成json数组的

  10. html 5实用特性之data属性

    HTML 5之前,我们必须依赖于class和rel属性来存储需要在网站中使用的数据片段,这种做法有时会在网站的外观和实用性之间产生冲突.而HTML 5 Data属性的存在就能很好满足需要. HTML5 ...

随机推荐

  1. Netty系列之一开始使用

    Netty是用来做什么的呢,我的理解是它是一个网络开发框架,利用它能很快速方便的开发出高性能的服务端和客户端.刚开始学习java的时候你一定接触过怎么利用socket去实现服务端和客户端,后来java ...

  2. const in C/C++

    1.const 对象必须初始化,因为一旦创建后值不能改变. Eg: const int i = GetSize(); //正确:运行时初始化 const int j = 42;   //正确:编译时初 ...

  3. 如何快速编写和调试 Emit 生成 IL 的代码

    .NET Core/.NET Framework 的 System.Reflection.Emit 命名空间为我们提供了动态生成 IL 代码的能力.利用这项能力,我们能够在运行时生成一段代码/一个方法 ...

  4. 流畅设计 Fluent Design System 中的光照效果 RevealBrush,WPF 也能模拟实现啦!

    UWP 才能使用的流畅设计效果好惊艳,写新的 UWP 程序可以做出更漂亮的 UI 啦!然而古老的 WPF 项目也想解解馋怎么办? 于是我动手实现了一个!   迫不及待看效果 ▲ 是不是很像 UWP 中 ...

  5. bat命令2

    echo.@.call.pause.rem(小技巧:用::代替rem)是批处理文件最常用的几个命令,我们就从他们开始学起. echo 表示显示此命令后的字符 echo off 表示在此语句后所有运行的 ...

  6. Sprint第一个冲刺(第八天)

    一.Sprint介绍 完善点餐界面,点击进行跳转. 实验截图: 任务进度: 二.Sprint周期 看板: 燃尽图:

  7. 嵌入式linux问题杂锦

    tftp 在开发板上不能获取共享文件,出现: Permission denied tftp: can't open 'myTcpTest': Permission denied 是因为,我在/sys目 ...

  8. 研究ecmall一些流程、结构笔记 (转)

    index.phpECMall::startup() //ecmall.php object //所有类的基础类 ecmall.phpBaseApp //控制器基础类 app.base.phpECBa ...

  9. list.ForEach的用法

    Templist.ForEach(o => { var isSel = ReviewerFileRelationService.Where(s => s.PackageFileId == ...

  10. RK3288 USB触摸屏与USB摄像头同时使用时触摸卡顿

    CPU:RK3288 系统:Android 5.1 当USB触摸屏与USB摄像头同时使用时,有时会出现触摸卡顿,看似按键按下没有弹起. getevent 查看触摸屏上报,只有 DOWN,没有 UP,正 ...