<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.9.1.min.js" type="text/javascript"> </script>
<link href="style.css" rel="stylesheet" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript">
$(function () {
$(".helpBox-leftbox li").click(function () {
var Current = $(this).index();
$('[helpTutorials]').hide();//隐藏所有对象
$('.helpTutorials' + Current).fadeIn();
})
})
</script>
</head>
<body>
<div class="helpBox">
<div class="helpBox-left">
<strong>XXX</strong>
<div class="helpBox-leftbox">
<ul>
<span>XXX</span>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<span>XXX</span>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<ul>
<span>XXX</span>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</div>
<div class="helpTutorials helpTutorials1">
<div class="help-one">
<span>《null - 1》</span>
</div>
<p>
1.............<br />
</p>
</div>
<div class="helpTutorials helpTutorials2">
<div class="help-one">
<span>《kong - 000000000000000000000000000000000000000002》</span>
</div>
<p>
</p>
</div>
<div class="helpTutorials helpTutorials3">
<div class="help-one">
<span>《bai - 200000000000000000》</span>
</div>
<p>
</p>
</div>
<div class="helpTutorials helpTutorials4">
<div class="help-one">
<span>《bai - 200000000000000000》</span>
</div>
<p>
1.............<br />
2.............<br />
3.............
</p>
</div>
<div class="helpTutorials helpTutorials5">
<div class="help-one">
<span>《bai - 200000000000000000》</span>
</div>
<p>
1.............<br />
2.............<br />
3.............
</p>
</div>
<div class="helpTutorials helpTutorials6">
<div class="help-one">
<span>《bai - 200000000000000000》</span>
</div>
<p>
1.............<br />
2.............<br />
3.............
</p>
</div>
<div class="helpTutorials helpTutorials7">
<div class="help-one">
<span>《bai - 200000000000000000》</span>
</div>
<p>
1.............<br />
2.............<br />
3.............
</p>
</div>
<div class="helpTutorials helpTutorials8">
<div class="help-one">
<span>《bai - 200000000000000000》</span>
</div>
<p>
1.............<br />
2.............<br />
3.............
</p>
</div>
<div class="helpTutorials helpTutorials9">
<div class="help-one">
<span>《bai - 200000000000000000》</span>
</div>
<p>
1.............<br />
2.............<br />
3.............
</p>
</div>
<div class="helpTutorials helpTutorials10">
<div class="help-one">
<span>《bai - 200000000000000000》</span>
</div>
<p>
1.............<br />
2.............<br />
3.............
</p>
</div>
</div>
</body>
</html>
给你的.helpTutorialsX增加自定义属性helpTutorials,然后获取这些对象隐藏,在显示点击的对应的对象。
$(function () {
$(".helpBox-leftbox li").click(function () {
var Current = $(this).index();
$('[helpTutorials]').hide();//隐藏所有对象
$('.helpTutorials' + Current).fadeIn();
})
})
var arrbtn = ['btn_1', 'btn_2','btn_3,'btn_4','btn_5','btn_6','btn_7',];//保存ID
function getData(name) {
//修改样式
for (var key in arrbtn) {
if (arrbtn[key] == name) {
//显示
}
else {
//隐藏
}
}
}
$(".helpBox-leftBox li").click(function(){
var Current = $(this).index();
$(".helpTutorials").fadeOut();
$(".helpTutorials"+Current).slideDown();
});
$(function(){
$(".helpBox-leftbox li").click(function(){
var Current = $(this).index();
if(Current==1){
$('.helpTutorials' + Current).fadeOut();
}else{
$('.helpTutorials' + Current).fadeIn();
}
})
})
这个方法只显示不隐藏。。。。
$(".helpBox-leftBox li]").each(function(){
$(this).click(function(){
$(".helpTutorials").hide();//请统一一个共有的class
$(".helpTutorials"+this.index()).show();
});
});