一般在使用jquery的扩展的 ui方面的插件, 都要注意链接两个文件

一个是ui 相关的js文件

另一个是 ui相关的 css文件!

参考这个css布局

通常多个平行的items 都是用ul li来做的

在布局上: 而ul >li并不一定都是用float:left来做的, 同样可以用display: inline-block的方式来做!!!

在css上:

ul class="nav"
.nav {
list-style: none;
text-align: center; // 让ul中的li居中,因为默认的是从最左边开始排列的
padding: 0;
} .nav .nav-selected {
border-top-color: #000; //被选中的元素添加这个类. border的样式设置: border-top(指定哪一边)-color(哪个属性):
font-weight: bold;
} .nav li { // 默认的没有被选中的li,
margin: -1px 0 0 0;
padding: 0;
display: inline-block;
border-top: 1px solid #ccc; // 这里只设置某一个边的 边线: border-top, 没有选中的 时候是灰色!
}

怎样突出显示当前选中的li? 通过:字体的font-weight:bold; 和 (上)边线颜色的改变:( 默认的边线颜色是: ccc, 选中的是000)来实现的!!

.nav a { //nav里面的li中的a, 默认的都是黑色, 只是在当前选中的链接上通过 font-weight: bold加粗来突出.
color: #000;
display: block; // 这个要设置为块: block
text-align: center;
padding: 12px 24px;
}

jquery左右链接类似frameset的插件的更多相关文章

  1. 15款最好的 jQuery Modal(模态窗口)插件

    jQuery 模态窗口插件帮助网站开发人员显示网页中的特定内容,让用户聚焦到这个地方.模态窗口是嵌入到当前网页中,不用重定向到新网页的弹出窗口.这种技术可以用在图像画廊,电子商务网站,登陆框,电子邮件 ...

  2. Jquery打造的类似新浪微博@提醒功能

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

  3. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  4. [转] jQuery Infinite Ajax Scroll(ias) 分页插件介绍

    原文链接:http://justflyhigh.com/index.php/articlec/index/index.php?s=content&m=aticle&id=91 Infi ...

  5. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  6. jQuery之换肤与cookie插件

    有时候一个网页可以有多个皮肤进行选择,也就是不同的背景,或是一整套新的css,能使整个页面变成另一种风格. 这个功能可以用jQuery来实现.外加cookie插件.有了cookie,就可以长时间的保存 ...

  7. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  8. Jquery的bootstrap在线文本编辑器插件Summernote

    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...

  9. 用jQuery写了一个模态框插件

    用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...

随机推荐

  1. bzoj 1101 zap

    gcd(x,y)=d-->gcd(x/d,y/d)=1. 即求Σ(i<=n/d)Σ(j<=m/d) e(gcd(i,j)) 因为e=miu×1,可以卷积. 因为多组询问,需要sqrt ...

  2. BZOJ 4551: [Tjoi2016&Heoi2016]树

    4551: [Tjoi2016&Heoi2016]树 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 748  Solved: 394[Subm ...

  3. 【BZOJ-1507】Editor 块状链表

    1507: [NOI2003]Editor Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 3397  Solved: 1360[Submit][Stat ...

  4. Linux修改密码passwd用法

    语法: passwd [-k] [-l] [-u [-f]] [-d] [-S] [username] 必要参数:-d 删除密码-f 强制执行-k 更新只能发送在过期之后-l 停止账号使用-S 显示密 ...

  5. [SVN Mac的SVN使用]

    在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境.在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还 ...

  6. ARPSpoofing教程(二) - 获取网络设备中的详细地址信息

    WinPcap中文API  http://www.ferrisxu.com/WinPcap/html/index.html 1: #include"pcap.h" 2: #incl ...

  7. Linux DHCP通过OPTION43为H3C的AP下发AC地址(总结)

    对于DHCP服务,可以在很多平台上进行设置.那么这里我们就主要讲解一下在Linux DHCP服务器上通过option 43实现H3C的AP自动联系AC注册的相关内容.原来的DHCP Server是放在 ...

  8. 精通javascript(看书笔记)

    变量的类型检查 //检测类型 var str = "Hello World"; if (typeof str=="string") {//使用typeof来判断 ...

  9. JQuery 学习笔记(01)

    JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Oper ...

  10. runtime使用小例子 - 给对象O-C属性赋值

    这些日子在家里学习runtime,看runtime的一些方法和前辈们的博客,我也尝试着写几个runtime有效的运用 一.给对象属性赋值,例如一个WebEntity类 她有三个属性:NSString. ...