正文
css点击改变样式,css点击改变样式不变化
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
css 点击后样式
/* 字体链接样式 */
td.firstLevelMenuClass a:link {color: #3E8BAC; text-decoration: none;} /* 未访问的链接 */
td.firstLevelMenuClass a:visited {color: #FFFFFF; text-decoration: none;} /* 已访问的链接 */
td.firstLevelMenuClass a:hover {color: #FFFFFF;} /* 鼠标移动到链接上 */
td.firstLevelMenuClass a:active {color: #FFFFFF;} /* 选定的链接 */
/* 鼠标事件背景样式 */
td.firstLevelMenuClass:hover {background-image: url(../../Public/img/menu_first_down_bg.gif); } /* 鼠标移动到链接上 */
td.span style="color:#cc0000;"firstLevelMenuClassHover/span{background-image: url(../../Public/img/menu_first_down_bg.gif); }
td.firstLevelMenuClass{background-image: url(../../Public/img/head_menu_center.gif); }
JS:
[javascript] view plain copy
/*
* 取得对应类和标签的HTML元素
* clsName:给定类名
* tagName：给定的HTML元素，如果为任意 tagName='*'
*
*/
function getElementsByClassName(clsName, tagName) {
var ClassElements = [];
selElements = document.getElementsByTagName(tagName);
for (var i = 0; i selElements.length; i++) {
if (selElements[i].className == clsName) {
ClassElements[ClassElements.length] = selElements[i];
}
}
return ClassElements;
}
//通过改变元素class名达到间接改变背景样式
function onFirstMenuChangeBg(e) {
//先清除已经改变的元素背景样式
var getElements = getElementsByClassName('span style="color:#cc0000;"firstLevelMenuClassHover/span', 'td');
for (var i = 0; i getElements.length; i++) {
getElements[i].className = "firstLevelMenuClass";
}
//设置鼠标点击元素背景样式
e.className = "firstLevelMenuClassHover";
}
HTML:
[html] view plain copy
td class="firstLevelMenuClass" id="firstLevelMenu0" onclick="onFirstMenuChangeBg(this);"
a href='#'测试0/a
/td
td class="firstLevelMenuClass" id="firstLevelMenu1" onclick="onFirstMenuChangeBg(this);"
a href='#'测试1/a
/td
td class="firstLevelMenuClass" id="firstLevelMenu2" onclick="onFirstMenuChangeBg(this);"
a href='#'测试2/a
/td
相关问答
Q1: 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");修改引用外部的样式表文件，这样就可以对整个页面的样式进行全部更新。
Q2: 如何用它CSS设置鼠标单击后的样式
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的style标签中，输入css代码：a:visited {color: blueviolet;}。
3、浏览器运行index.html页面，此时超链接文本单击后的样式被设置了文字紫色颜色。
Q3: 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
