0

我正在制作一个“选项卡式导航”类型的页面，其中“主页”“关于”“链接”等页面实际上是隐藏的跨度，当点击相应的“a img”时会显示。那时所有其他页面都隐藏（）

“主页”页面是主要的启动页面，因此如果您单击“关于”，“关于”页面将显示（隐藏“主页”页面或任何打开的页面），再次单击“关于”将隐藏() “about”跨度并返回“home”跨度。

主要问题是随机发生，或者在完全通过每个链接之后发生，而不是隐藏“家”跨度，而是保持该跨度打开，并在“家”跨度下方打开单击的跨度。

我无法弄清楚是什么原因造成的。

HTML

<div id="container">
<div id="navigation">   <a href="#" class="homeImg">One</a>
<a href="#" class="aboutImg">Two</a>
<a href="#" class="hireImg">Three</a>
<a href="#" class="workImg">Four</a>
<a href="#" class="linksImg">Five</a>

</div>
<div id="content">
<span class="startingContent" id="navContent">
            <h1>This is the splash page</h1>
            <h2>This should dissapear when another link is clicked</h2>
            <h3>Reappear when no other links are open</h3>
</span>

<span class="aboutContent" id="navContent">
            <h1>Random Text</h1>
            <p>Random Text</p>
    </span>
<span class="hireContent" id="navContent">
            <h1>Random Text</h1>
            <p>Random Text</p>
    </span>
<span class="workContent" id="navContent">
            <h1>Random Text</h1>
            <p>Random Text</p>
    </span>
<span class="linksContent" id="navContent">
            <h1>Random Text</h1>
            <p>Random Text</p>
    </span>

    </div>
</div>

jQuery

$(document).ready(function () {
$('.aboutContent, .hireContent, .workContent, .linksContent, ').hide(function () {
$('.aboutImg').click(function () {
$('.startingContent,  .hireContent, .workContent, .linksContent').hide(function   () {
            $('.aboutContent').show(function () {
                $('.aboutImg').click(function () {
                    $('.aboutContent').hide(function () {
                        $('.startingContent').show();
                    });
                });
            });
        });
    });
});
});

$(document).ready(function () {
$('.aboutContent, .hireContent, .workContent, .linksContent, ').hide(function () {
    $('.hireImg').click(function () {
 $('.startingContent, .aboutContent, .workContent, .linksContent').hide(function   () {
            $('.hireContent').show(function () {
                $('.hireImg').click(function () {
                    $('.hireContent').hide(function () {
                        $('.startingContent').show();
                    });
                });
            });
        });
    });
});
});

$(document).ready(function () {
$('.aboutContent, .hireContent, .workContent, .linksContent,').hide(function () {
    $('.workImg').click(function () {
$('.startingContent, .aboutContent, .hireContent, .linksContent').hide(function () {
            $('.workContent').show(function () {
                $('.workImg').click(function () {
                    $('.workContent').hide(function () {
                        $('.startingContent').show();
                    });
                });
            });
        });
    });
});
 });

 $(document).ready(function () {
 $('.aboutContent, .hireContent, .workContent, .linksContent,').hide(function () {
    $('.linksImg').click(function () {
 $('.startingContent, .aboutContent, .hireContent, .workContent,').hide(function () {
            $('.linksContent').show(function () {
                $('.linksImg').click(function () {
                    $('.linksContent').hide(function () {
                        $('.startingContent').show();
                    });
                });
            });
        });
    });
});
});



$(document).ready(function () {
$('.aboutContent, .hireContent, .workContent, .linksContent, ').hide(function () {
    $('.homeImg').click(function () {
   $(' .aboutContent, .hireContent, .workContent, .linksContent').hide(function () {
            $('.startingContent').show();
        });
    });
});
 });

CSS

body {
background-color: #403C29;
margin: 0, auto;
padding: 0;
color: white;
}
#container {
position:absolute;
left: 50%;
width:960px;
margin-left:-480px;
}
#navContent {
width: 960px;
height: 600px;
background-color: #403C29;
}
#navigation {
text-align: center;
}

http://jsfiddle.net/alanh13/YpXbn/2/ （演示由于某种原因无法运行，但可以在浏览器中运行）

4

1 回答 1

0

此外，您不能拥有具有相同 ID 的元素。这就是课程的用途。id 属性是有意使其唯一的。

这是您应该做的精炼版本：http: //jsfiddle.net/TRTxB/1/

试试这个怎么样...我相信你可以很容易地应用这个概念。这是存储要在给定元素的自定义选择器中显示的 div 的 ID。

<div class="container">
    <div class="nav">
        <a content="aDiv" class="navBtn">A</a>
        <a content="bDiv" class="navBtn">B</a>
        <a content="cDiv" class="navBtn">C</a>
    </div>
</div>
<div id="aDiv" class="data">
    A div
</div>
<div id="bDiv" class="data">
    B div
</div>
<div id="cDiv" class="data">
    C div
</div>

JS：

 $(document).ready(function(){

    $('.navBtn').click(function(event){

        var contentSelector = $(this).attr('content');
        $('.data').hide();
        $("#"+contentSelector).show();
    });

});

这是一个 JS 小提琴：http: //jsfiddle.net/52CQA/

于 2013-05-16T04:35:14.310 回答