js+CSS怎么实现互斥样式?详见下面

html-css019

js+CSS怎么实现互斥样式?详见下面,第1张

用jquery

点击时触发一个函数。比如

<div id="divNum">

<div id="div1" onclick="changeColor(this.id)"></div>

<div id="div2" onclick="changeColor(this.id)"></div>

<div id="div3" onclick="changeColor(this.id)"></div>

</div>

将这些div放到一个大的div容器中。

function changeColor(id){

$("#divNum div").css("background-color","blue")//别的div变成蓝色

$("#"+id).css("background-color","red")//被点击的变成红色

}

hidden属性在html5中,只要存在,就是隐藏效果,而不论值为多少,要显示元素,要删除hidden属性,而不是设置为false。实现代码如下:

<script type=“text/javascript” async=“true”>

function qq_onclick(){

var text_2=document.getElementById(“text_1”);

text_2、removeAttribute(“hidden”);

}

function qq_close(){

var text_1=document.getElementById(“text_1”);

text_1、setAttribute(“hidden”,true);

}

</script>

扩展资料:

HTML5的特性主要包括哪些内容

随着移2113动互联网的飞速发展,5261目前Html5技术也得到了不断的完善,开4102发技术方面越来越成熟了,成为了1653目前主流的开发语言之一。html5的特性在五个方面体现的淋漓尽致

1、语义特性:

HTML5赋予网页更好的意义和结构。

2、HTML5 APP Cache及本地存储:

基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度

3、设备兼容:

HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以与浏览器内部的数据直接相连。

4、连接特性:

更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,能实现服务器将数据“推送”到web app的功能。

5、图形特性:

基于SVG、Canvas、WebGL及CSS3的3D功能,用户能在浏览器中得以体验到惊艳的视觉效果。

css设置按钮样式的方法:定义一个css选择器,然后在按钮标签中使用此选择器即可设置按钮样式。使用:hover伪类选择器可以设置按钮交互时样式。

button样式需要注意的有几点:

1、建议有一个最小宽度,以免在文字很少时使得按钮过于窄,宽高不协调;

2、建议有一个padding,以免内部文本显得过于拥挤;

2、hover时需要有颜色变化,以告诉用户这是一个可交互元素,更为灵动;

3、获得焦点时应与hover时的效果一致,释放焦点时则回到普通效果。

4、获得焦点时的outline建议去掉,否则较为难看。

普通状态样式设置:.btn{

min-width: 60px

padding: 5px 8px

background: #fff

color: #4daff9

border: 1px solid #4daff9

}

交互状态(hover、focus)样式设置:.btn:hover{

color: #fff

background: #0a90f5

}

.btn:focus{

color: #fff

background: #0a90f5

outline: none

}