如何用JQ+CSS伪类实现页面布局实时改变

html-css019

如何用JQ+CSS伪类实现页面布局实时改变,第1张

但我的需求有点特别，我希望在不添加多余按钮或链接等 dom 元素的情况下，在一个不起眼的边角处加入此选项，并且，页面加载时自动判断，如果该文有边栏则显示，无边栏则不显示此选项（因为我的网站后台发文有显示/隐藏边栏的选项，只是在前台用户无法自己选择），同时切换到无边栏模式后，自动将原位置的 text 和 function 改为“显示边栏”。

还要考虑到自适应站在移动端的显示情形，我的网站在移动端已经自动隐藏了边栏，所以可以永远不显示此选项。总之一句话，希望页面更简单一点。

于是想来想去，只能加在文章标题和内容之间的那根 hr 横线上，并将其推到右角，这样既不会太突兀，也不会破坏坏整体页面风格，而且伪类的 content 并不是 dom 元素。

当然，这根 hr 横线也是有加 CSS3渐变码的，出来的效果还不错，只是众所周知的原因，hr 作为无结束符的特定元素，只能通过添加伪类的方式写入content，而最强大的 jq 选择器对伪类 content 也无法获取，更别说 bind 事件在上面了。

<script type="text/javascript">

$(function(){

$("ul li a").click(function(){

$(this).addClass("cur").parent().siblings().children("a").removeClass("cur")

})

})

</script>

你的写法是移除a的同辈元素

每个li下只有一个a

这里的a是没有同辈元素的

你要移除的应该是a的父级元素li的同辈元素的子元素a

1、jQuery设置css样式

<div style="background-color:#ffffffpadding-left:10px">测试jQuery动态获取padding-left</div>

2、用css()方法返回元素的样式属性

$("div").css("padding-left"))

3、用css()设置样式

$("div").css("color","yellow")

4、设置多个样式

$("div").css({"background-color":"yellow","font-size":"200%"})

var css = {

 background-color: '#EEE',

 height: '500px',

 margin: '10px',

 padding: '2px 5px'  }

$("div").css(css)