政务网站建设建议,杭州清风室内设计学校,可以用什么做网站登录页面,手机html网页制作软件1. jQuery样式操作
1.1 操作css方法
参数只写属性名,则返回属性值(字符串)
$(this).css(color)参数是 属性名、属性值(逗号分隔#xff0c;则表示设置属性
$(this).css(color,red)参数可以是对象的形式
$(this).css({width: 400px,height: 400px
})1.2 设置类样式方法
添…1. jQuery样式操作
1.1 操作css方法
参数只写属性名,则返回属性值(字符串)
$(this).css(color)参数是 属性名、属性值(逗号分隔则表示设置属性
$(this).css(color,red)参数可以是对象的形式
$(this).css({width: 400px,height: 400px
})1.2 设置类样式方法
添加类
$(button:first).click(function() {$(div).addClass(block)
})删除类
$(button:first).click(function() {$(div).removeClass(block)
})切换类
$(button:first).click(function() {$(div).toggleClass(block)
})1.3 栗子: tab栏切换
思路:
当点击小li时,当前被点击的li添加类 current, 其余的移除current类得到当前的索引号,显示相同索引号的内容
style.clearfix:before,.clearfix:after {content: ;display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}.header ul {width: 700px;height: 50px;padding-top: 15px;background-color: #ccc;}.box {width: 700px;height: 300px;margin: 30px auto;}li {float: left;height: 40px;line-height: 40px;list-style: none;padding: 0 15px;}li:hover {cursor: pointer;}.current {background-color: red;color: white;}.header {padding-top: 15px;}.content {padding-top: 20px;padding-left: 45px;}.content div {display: none;}
/style
/head
body
div classboxdiv classheader clearfixulli classcurrent商品介绍/lili规格与包装/lili售后保障/lili商品评价(50000)/lili手机社区/li/ul/divdiv classcontentdiv displayblock商品介绍模块/divdiv规格与包装模块/divdiv售后保障模块/divdiv商品评价(50000)模块/divdiv手机社区模块/div/div
/div
script$(function() {$(.content div:first).show()$(.box li).click(function() {var currentIndex $(this).index();$(this).addClass(current)$(this).siblings(li).removeClass(current)$(.content div).hide()$(.content div).eq(currentIndex).show()})})
/script
/body
