Question

好吧，我对jquery和javascript非常陌生，对我来说很光鲜。 js代码非常大，我确信有一个非常简单的解决方案可以缩短它，所以首先要有一个想法。

主要问题。显然，我正在制作的是“标签式导航”类型的页面，其中“主页”“关于”“链接”等页面实际上是隐藏的跨度，显示何时单击相应的“a img”。那时所有其他页面都要隐藏（）

“主页”页面是主要的启动页面，因此如果您单击“关于”，将显示“关于”页面（隐藏“主页”页面或打开的任何一个页面），然后再次单击“关于”将.hide（）“约”跨度并返回“家”跨度。

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

我无法弄清楚造成这种情况的原因。

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/（该演示由于某种原因无效，但在浏览器中有效）

任何帮助将不胜感激！

Answer 1

此外，您不能拥有具有相同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/

首次通过所有链接后隐藏/显示无法正常工作

HTML

-----

jquery的

-----

CSS

1 个答案: