一个按钮切换两个css样式

html-css022

一个按钮切换两个css样式,第1张

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

CSS3 有一个 :target 属性

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

<!DOCTYPE html>

<html>

<head>

<style>

:target {

    border: 2px solid #D4D4D4

    background-color: #e5eecc

}

</style>

</head>

<body>

<h1>This is a heading</h1>

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

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

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

<p id="news1"><b>New content 1...</b></p>

<p id="news2"><b>New content 2...</b></p>

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

</body>

</html>

首先在css文件中设置对应的a标签样式1

，一般用类名，如：<a

href="#"

class="style1"

id

=“a”>a标签</a>

.style1

{

color:#000

}

同时准备样式2

.style2{

color:#fff

}

在脚本事件中为a绑定点击事件：var

a

=

document.getElementById("a")

a.onclick=

function

(){a.className

=

"style2"

}