zl程序教程

您现在的位置是:首页 >  前端

当前栏目

jquery左右链接类似frameset的插件

jQuery链接插件 类似 左右
2023-09-14 09:08:51 时间

一般在使用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;
}