点击按钮切换内容效果(使用CSS DIV与JavaScript)_轩笑

http://blog.sina.com.cn/u/2335602187

首页博文目录关于我

个人资料

微博

加好友发纸条

写留言加关注

博客等级：
博客积分：

博客访问：
关注人气：
获赠金笔：0支
赠出金笔：0支
荣誉徽章：

正文字体大小：大中小

点击按钮切换内容效果(使用CSS DIV与JavaScript)

(2012-10-16 15:31:46)

标签：

it

分类：网页

<head>
<script type="text/javascript">
function change_div(id){
if (id == 'gsywly' )
{
     document.getElementByIdx_x("gsgs").style.display = 'none' ;
     document.getElementByIdx_x("gsywly").style.display = 'block' ;
}
else
{
     document.getElementByIdx_x("gsywly").style.display = 'none' ;
     document.getElementByIdx_x("gsgs").style.display = 'block' ;
}
}
</script>

<body>
<div id="button">
    <ul>
      <li id="a"><a href="#" onclick="change_div('gsgs')">公司概述</a></li>
      <li id="b"><a href="#" onclick="change_div('gsywly')">公司业务领域</a></li>
    </ul>
</div>
<div id="gsgs">
    <h2>公司概述</h2>
</div>
<div id="gsywly" >
    <h2>公司业务领域</h2>
</div>
</body>

说明：

本段代码分成两大部分，分别是<head>和<body>，<head>与</head>之间又分为<script>与<style>部分。<body>部分是前台表现的内容，有3个div，每个div都有一个自己的id，这是为了给<script>部分的脚本语言调用或是<style>里的CSS定义表现形式。在此代码中<script>中用的是JavaScript语言，document.getElementByIdx_x_x_x_x_x_x_x_x()就是从查找使用该ID的HTML标记，并用.style来给该标记定义表现形式。在此代码中<style>中使用ID选择器定义了按钮2“公司业务领域”在网页打开时是不显示的。

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report

前一篇：css 透明度

后一篇：CSS 语法和JavaScript 语法区别

新浪BLOG意见反馈留言板　欢迎批评指正