如何设计点击点击一个div,其他div做出对应反应

<div id="show">     <div>1</div>     <div>2</div>     <div>3</div>     </div>

    <div id="click">    <div>click1</div>    <div>click2</div>    <div>click3</div>    </div>

要求:1,点击click1,show对应显示1(2,3消失)           2,与此同时,click1的样式改变           3,点击其它click,显示类似
<script type="text/javascript">
window.onload = function() {
    var click_divs = document.getElementById("click")
        .getElementsByTagName("div");
    var show_divs = document.getElementById("show")
        .getElementsByTagName("div");
    for(var i = 0; i < click_divs.length; i++) {
        !function(a) {
            // 点击 #click div
            click_divs[a].onclick = function() {
                // #show div 全部隐藏
                for(var x = 0; x < show_divs.length; x++) {
                    show_divs[x].style.display = "none";
                }
                // 对应 #show div 显示
                show_divs[a].style.display = "block";

                // #click div 样式还原
                for(var y = 0; y < show_divs.length; y++) {
                    click_divs[y].style.fontWeight = "Normal";
                }
                // 对应 #click div 样式加粗
                click_divs[a].style.fontWeight = "Bold";
            };
        }(i);
    }
};
</script>
时间: 2025-01-09 12:05:09

如何设计点击点击一个div,其他div做出对应反应的相关文章

input点击链接另一个页面,各种操作

1.链接到某页<input type="button" name="Submit" value="确 定" class="btn" onclick="location.href='filename.html'" />2.返回(等同后退)<input name="Submit2" type="button" class="btn"

ExtJs window(二)点击按钮打开一个window,window重复创建的问题

例1:点击按钮打开一个window,window重复创建的问题重点分析:这个问题是初学者经常会犯错的地方,一般来说简单的代码不会产生此问题,但是如果以后代码复杂以后,这个问题如果发生调试起来会非常麻烦!!第一种,窗体无id,对此点击问题:modal属性背景置灰,从而使触发该窗体的按钮只能按一次第二种,窗体存在id,通过id判断窗体是否被创建 Ext.onReady(function(){ //例1:点击按钮打开一个window,window重复创建的问题 //重点分析:这个问题是初学者经常会犯错

2.点击链接走一个action

如何实现点击链接走一个action,代码如下: <a href="javascript:window.location.href='xxx.action?需要的参数';" >该链接会走一个action</a>

【转】GridView 加载空行并点击编辑每一个单元格

1 代码 2 3 <script runat="server"> 4 protectedvoid Button1_Click(object sender, System.EventArgs e) 5 { 6 GridView1.DataSource = GetData(); 7 GridView1.DataBind(); 8 } 9 10 protectedvoid Button2_Click(object sender, System.EventArgs e) 11 {

创建一个弹出DIV窗口

创建一个弹出DIV窗口 摘自:   http://www.cnblogs.com/TivonStone/archive/2012/03/20/2407919.html 创建一个弹出DIV窗口可能是现在网站/网页制作中最常碰到的问题之一.传统的 JavaScript弹窗已经不适合目前网站的设计理念了,理由有二:首先,不友好——生硬的弹出对话框且伴随着“哐”的一声对用户体验是个很大的挑战: 其次,兼容性不够强——有相当多的浏览器屏蔽了这种JS的Alert()方法.于是,一个良好用户体验的网站需要一种

Linux内核设计第三周——构造一个简单的Linux系统

Linux内核设计第三周 ——构造一个简单的Linux系统 一.知识点总结 计算机三个法宝: 存储程序计算机 函数调用堆栈 中断 操作系统两把宝剑: 中断上下文的切换 进程上下文的切换 linux内核源代码分析 arch/目录保存支持多种CPU类型的源代码 其中的关键目录包括:Documentation.drivers.firewall.fs(文件系统).include init目录:含有main.c,内核启动相关的代码基本都在init目录下 start_kernal()函数为启动函数,初始化内

假如有一个固定高度的div,如何让里面的一个图片垂直居中?

假如有一个固定高度的div,如何让里面的一个图片垂直居中? 使用display:table-cell属性就行,直接上代码 html: <div class="warp"><a href="#"><img src="http://hiphotos.baidu.com/doc/pic/item/bf096b63f6246b6002fdbd30ebf81a4c500fa286.jpg" alt="" d

css3 实现鼠标放到一个div上显示出另一个隐藏的div

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"/> <title>CSS Test Page</title> <style type="text/css"> *{ margin: 0; padding: 0; } .cent{ background:#0CF; height:200p

一个漂亮的DIV搜索条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <HTML> <HEAD> <TITLE>搜索条</