js点击菜单切换内容

JavaScript017

js点击菜单切换内容,第1张

<html>

<head>

<meta charset="UTF-8">

<title>test</title>

</head>

<body>

</body>

<input type="button" value="a"  onclick="change(1)">

<input type="button" value="b"  onclick="change(2)">

<input type="button" value="c"  onclick="change(3)">

<div id="div_1" style="width:20pxheight:20pxbackground:red">1</div>

<div id="div_2" style="width:20pxheight:20pxbackground:green">2</div>

<div id="div_3" style="width:20pxheight:20pxbackground:blue">3</div>

<script type="text/javascript" src="js/jquery1.42.min.js"></script>

<script type="text/javascript">

function change(type){

for (var i = 1i <4i++) {

if(i==type){

$('#div_'+i).show()

}else{

$('#div_'+i).hide()

}

}

}

</script>

</html>

function change(obj){

var divStyle =document.getElementById('id').style.display

var src=obj.src

var c=src.lastIndexOf("/")+1

var s=src.slice(c)

if(divStyle=="block"){

document.getElementById('id').style.display="none"

obj.src=src.replace(s,"隐藏时的图片.jpg")

}

if(divStyle=="none"){

document.getElementById('id').style.display="block"

obj.src=src.replace(s,"显示时的图片.jpg")

}

}

<img src="images/resume/显示时的图片.jpg" onclick="change(this)"/>

<div id="id" style="display:block">你的代码</div>

换这个方法试试，适合只有一组需要切换的，动态就需要把div的id动态传值，赋值，其他的代码不需要变，一般情况一对隐藏显示就有一组对应的按钮，所以div的id是可以动态传过来，

<img src="images/resume/显示时的图片.jpg" onclick="change(this,'id')"/>

<div id="id" style="display:block">你的代码</div>

<img src="images/resume/显示时的图片.jpg" onclick="change(this,'id_1')"/>

<div id="id_1" style="display:block">你的代码</div>

到JS里接受这个参数就行了function change(obj,id){}

1、使用js动态操作元素样式

//定义onClick方法

function click(){

    document.getElementById("p1").style.display="block"

    document.getElementById("p2").style.display="none"

}

2、先写好css在onClick事件中改变元素class

.show{display:block}

.hidden{display:none} /定义onClick方法

function click(){

    document.getElementById("p1").className="show"

    document.getElementById("p2").className="hidden"

}