按钮点击css样式切换,按钮点击后改变样式

css3如何通过点击改变样式

CSS3 有一个 :target 属性

这是一个简单的DEMO 高级用法可以再百度搜索：

!DOCTYPE html

html

head

style

:target {

    border: 2px solid #D4D4D4;

    background-color: #e5eecc;

}

/style

/head

body

h1This is a heading/h1

pa href="#news1"Jump to New content 1/a/p

pa href="#news2"Jump to New content 2/a/p

pClick on the links above and the :target selector highlight the current active HTML anchor./p

p id="news1"bNew content 1.../b/p

p id="news2"bNew content 2.../b/p

pbNote:/b Internet Explorer 8 and earlier versions do not support the :target selector./p

/body

/html

相关问答

Q1: 在asp.net中 点击button 怎么会改变 页面的css样式呢?

不是button的 原因 代码我测试 过了 不知道你的浏览器是什么 不过 css怎么变化了 是 页面的样式变了么？ 如果是 ：

我分析如下

1、你的电脑是 是不是装了什么 主题之类的 有时候有影响 我之前就是的

2、检查浏览器是不是有问题 或者用别的浏览器 调试一下

3、考虑一下CSS代码的 兼容性问题 CSS在各个浏览器的解析不一样

我推荐 使用 火狐 和 IE各版本兼容器(包含 IE5 IE6 IE7 IE8 必须装IE8才可以) 然后调试一下

Q2: 一个按钮切换两个css样式

按钮绑定一个点击事件，只是改变少量的样式使用$(".div").css("background","red");即可，如果是整个页面改变，就需要用到页面样式写缓存或数据库，重新加载页面来判断用户选择了那个样式，然后显示不同的样式加载

Q3: CSS可否改变设置按钮的样式？怎么做呢？菜鸟求教~

1、首先创建一个txt文件，修改后缀名：把.txt改为.html，用记事本打开添加如下代码：打开浏览器，这是一个没有添加样式的button，外观不美观，而且在不同的浏览器下显示的外观是不一样的，所以我们要添加统一的样式。

2、按钮样式比较多，这样写让代码不整洁，可阅读性差，就要用style标签。

3、style type="text/css"/style样式表。style标签里面表示的是一个样式表，我们所有的样式都可以写到标签中去。这段代码的意思是：凡是button标签都使用这个样式。

4、把 样式表中的  button{}改成了.ui_button{}，然后在button标签里面加了class属性，这样做的意思是，这个button标签使用了名字为ui_button的样式。

5、通过javascript动态修改样式，为了避免用户多次点击提交按钮重复提交信息，在用户点击提交按钮之后，禁用按钮，并设置按钮字体的颜色为灰色。

6、修改样式的其他方法：obj.style.cssText = "color:#E1E1E1;background-color:black;";cssText可以写多个样式样式属性。

7、修改样式的其他方法：obj.setAttribute("class", "style2");直接更改按钮标签的class属性，把指向名为ui_button的样式改为指向名为style2的样式。

8、修改样式的其他方法：link href="css1.css" rel="stylesheet" type="text/css" id="css"/obj.setAttribute("href","css2.css");修改引用外部的样式表文件，这样就可以对整个页面的样式进行全部更新。