js的例子

一、好友选中

<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ width:300px; height:300px;}
.list{ width:300px; height:40px; background-color:#60F; margin-bottom:2px; text-align:center; line-height:40px; vertical-align:middle; color:white}
.list:hover{ cursor:pointer;}
</style>
</head>

<body>

<div id="wai">
<div class="list" onclick="sel(this)" onmouseover="gai(this)" xz="0" onmouseout="hui()">张三</div>
<div class="list" onclick="sel(this)" onmouseover="gai(this)" xz="0" onmouseout="hui()">李四</div>
<div class="list" onclick="sel(this)" onmouseover="gai(this)" xz="0" onmouseout="hui()">王五</div>
<div class="list" onclick="sel(this)" onmouseover="gai(this)" xz="0" onmouseout="hui()">赵六</div>
<div class="list" onclick="sel(this)" onmouseover="gai(this)" xz="0" onmouseout="hui()">马七</div>
</div>

</body>
<script type="text/javascript">
function sel(d){
//让所有的变为非选中
var list = document.getElementsByClassName("list");
for(var i=0;i<list.length;i++){
list[i].style.backgroundColor = "blue";
list[i].setAttribute("xz","0");
}
//让当前的变为选中
d.style.backgroundColor = "red";
d.setAttribute("xz","1");
}

function gai(d){
//让所有的变为非选中
var list = document.getElementsByClassName("list");
for(var i=0;i<list.length;i++){
if(list[i].getAttribute("xz")=="0"){
list[i].style.backgroundColor = "blue";
}
}
//让当前的变为选中
d.style.backgroundColor = "red";
}

function hui(){
//让所有的变为非选中
var list = document.getElementsByClassName("list");
for(var i=0;i<list.length;i++){
if(list[i].getAttribute("xz")=="0"){
list[i].style.backgroundColor = "blue";
}
}
}
</script>

二、左侧下拉列表选择

<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ width:300px; height:500px; margin-top:100px;}
.list{ width:300px; height:40px; background-color:#60F; text-align:center; line-height:40px; vertical-align:middle; color:white;}
.erji{ width:300px; height:120px;}
.item{ width:300px; height:40px; text-align:center; line-height:40px; vertical-align:middle}
</style>
</head>

<body>

<div id="wai">
<div class="list" onclick="show(‘chanpin‘)">产品中心</div>
<div id="chanpin" class="erji" style="display:none">
<div class="item">家电</div>
<div class="item">食品</div>
<div class="item">手机</div>
</div>
<div class="list" onclick="show(‘xinwen‘)">新闻中心</div>
<div id="xinwen" class="erji" style="display:none">
<div class="item">国内</div>
<div class="item">国际</div>
<div class="item">娱乐</div>
</div>
<div class="list" onclick="show(‘zuixin‘)">最新优惠</div>
<div id="zuixin" class="erji" style="display:none">
<div class="item">热销产品</div>
<div class="item">新上市</div>
<div class="item">最优惠</div>
</div>
</div>

</body>
<script type="text/javascript">
function show(id){
var d = document.getElementById(id);
if(d.style.display == "none"){
d.style.display = "block";
}else{
d.style.display = "none";
}
}
</script>
</html>

时间： 2024-08-04 23:00:35

js的例子的相关文章

js小例子（标签页）

运用js写的一个小例子,实现点击不同的标签出现不同的内容: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta chaset="utf-8"> 5 <script> 6 function nav(obj, x) 7 { 8 var a = obj.parentNode.parentNode.children; 9 for(var i =0;i<a.length;i++) { 10 a[

第一个vue.js的例子

1.使用notepad建立一个网页文件demo.html, <!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue first demo</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head&g

js基础例子购物车升级版（未优化版）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>购物车升级版</title> <style> table{border-collapse: collapse} tr td{ border: 1px solid black; text-align: center; } li{list-style:

js基础例子

创建变量 var obj=value; 其中obj是变量名; value表示可能是数字,数组,函数之类的 多变量进行计算 var a1=200,b1='hello',c1=400; var d1=c1-a1;//这样就进行了简单的计算 变量主要的工作是将右边保存给等号左边 console.log(obj);输入obj的内容,其中obj表示可能是数组,可能是函数之类的 str.toString()转换为字符串方式 typeof(obj):查看obj是什么类型 String(c):将c转为字符串方式

分享插件js代码例子

<ul class="clearfix fpico clearfix shares"> <li><a title="分享到新浪微博" onclick="javascript:bShare.share(event,'sinaminiblog',0);return false;" style="cursor:pointer;"><img src="/misc/images/ico

js应用例子——选项卡

<div id="wai"><div id="gy"> //这是3个选项.点击选项可以实现下面三个div的转换. <div class="gy_head" style="color:#999" guanlian="one">加入我们</div> <div class="gy_head" guanlian="two"

js基础例子动态创建table实例

<style> table{ width:500px; font-weight: bold; border: 1px solid #000; border-collapse:collapse; font-size:20px; text-align:center; margin: 0 auto; } td{ border: 1px solid #000000; } </style> <script> window.onload=function () { //创建一个数据

js小例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"         "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>     <title></title>     <meta http-equiv="Content-Type" content=&qu

js应用例子——滚动固定

<style type="text/css"> *{ margin:0px auto; padding:0px;}#wai{ width:100%; height:3000px;}#head{ width:100%; height:200px; background-color:#C30;}#dhl{ width:100%; height:150px; background-color:#00C;}#neirong{ width:100%; height:2000px;}.