一般在使用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. 56. Android中进程优先级小结

    作为一个多任务的系统,Android 系统当然能够尽可能长的保留一个应用进程,但是由于新的或者更重要的进程需要更多的内存,系统不得不逐渐终结老的进程来获取内存.为了声明哪些进程需要保留,哪些需要kil ...

  2. 编译hadoop-2.5.2总结

    原文:http://www.cnblogs.com/qigang/p/4194728.html 一.准备的资料 64位linux系统.我使用的是 CentOS JDK 1.7+.注:使用1.7即可,如 ...

  3. 【BZOJ-3165】Segment 李超线段树(标记永久化)

    3165: [Heoi2013]Segment Time Limit: 40 Sec  Memory Limit: 256 MBSubmit: 368  Solved: 148[Submit][Sta ...

  4. HA模式强制手动切换:IPC's epoch [X] is less than the last promised epoch [X+1]

    -- ::, WARN org.apache.hadoop.hdfs.qjournal.client.QuorumJournalManager: Remote journal failed to wr ...

  5. Unable to load native-hadoop library for your platform... using builtin-Java classes where applicable

    以前hadoop也有这个问题,没注意,用spark也提示,解决一下. 首先找到对应自己hadoop版本的的lib包,编译好后,名字类似hadoop-native-64-2.4.1.tar ,放到lib ...

  6. 【bzoj3991】 寻宝游戏

    http://www.lydsy.com/JudgeOnline/problem.php?id=3991 (题目链接) 题意 给出一个n个节点的带权树,m次操作每次修改一个关键点,求每次操作后,从其中 ...

  7. android颜色代码

    <?xml version="1.0" encoding="utf-8" ?> <resources> <color name=& ...

  8. Android成长日记-ViewPager的使用

    ViewPager在安卓应用中主要用于作为程序的引导页面,欢迎页面,以及其他的动画效果,下面将给你讲述ViewPager的使用 在Android3.0以上的Api中,提供了ViewPager的接口,所 ...

  9. HDU 2795 Billboard

    Description 在学校的入口处有一个巨大的矩形广告牌,高为h,宽为w.所有种类的广告都可以贴,比如ACM的广告啊,还有餐厅新出了哪些好吃的,等等..   在9月1号这天,广告牌是空的,之后广告 ...

  10. 2.头文件<bits/stdc++.h>

    用这种方法声明头文件只需两行代码 #include<bits/stdc++.h> using namespace std; 这个头文件包含以下等等C++中包含的所有头文件:  #inclu ...