关于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. [转]：What happens to older developers?

    原文链接可能失效. This post is old but will remain on the front page for the time being. 140313. Jeff Jenkin ...

  2. IE中拖放问题

    1.所有的元素上都能绑定放置目标的事件,但并不保证此元素是有效的放置对象. 默认情况下,IE中只有文本框(<input/>或<textarea/>)是网页上唯一有效的放置目标. ...

  3. (转)Java获取CLASSPATH路径

    ClassLoader提供了两个方法用于从装载的类路径中取得资源: public URL getResource(String name); public InputStream getResourc ...

  4. flask第十八篇——模板【2】

    请关注公众号:自动化测试实战 上一节我们介绍了模板的基本使用方法,现在我们想一个问题,如果把index.html放到template文件夹下面的文件夹该怎么办呢?其实很容易,当文件夹结构如下图所示时: ...

  5. 【DUBBO】dubbo的Cluster接口

    Directory中的多个Invoker伪装成一个Invoker, 对上层透明,包含集群的容错机制 Cluster可以看做是工厂类, 将目录directory下的invoker合并成一个统一的Invo ...

  6. 使用distillery 实现版本的动态升级&& 动态降级

    备注: distillery  使用很棒的elixir 打包构建工具,下面演示的是升级以及降级   1. 参考项目 https://github.com/rongfengliang/phoenix-r ...

  7. 你真的了解分层架构吗？——写给被PetShop"毒害"的朋友们

    一叶障目 .NET平台上的分层架构(很多朋友称其为“三层架构”),似乎是一个长盛不衰的话题.经常看到许多朋友对其进行分析.探讨.辩论甚至是抨击.笔者在仔细阅读了大量这方面文章后,认为许多朋友在分层架构 ...

  8. Linux VPS上DenyHosts阻止SSH暴力攻击

    2009年07月23日 下午 | 作者:VPS侦探 现在的互联网非常不安全,很多人没事就拿一些扫描机扫描ssh端口,然后试图连接ssh端口进行暴力破解(穷举扫描),所以建议vps主机的空间,尽量设置复 ...

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

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

  10. Renesas APIs ***

    一个线程,强行结束另外一个线程,并将其挂起: static void SuspendTask(TX_THREAD *thread) { UINT status = ; UINT state; stat ...