show hide-点击2隐藏1 点击1隐藏2 那点击3 4 5该怎么弄？

问题描述

点击2隐藏1 点击1隐藏2 那点击3 4 5该怎么弄？

 <!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();
        });
    });

时间： 2024-08-04 03:28:30