0

我是 JS 新手，对 HTML/CSS 了解一点，因此非常感谢任何帮助。我有一周的时间在服务器上发布我的网站

我让一切正常工作，我喜欢。它可以很好地扩展/折叠，我对结果很满意。我面临的问题是，我的网站上有一个图像轮播，并希望将其链接到 div。

例如：当访问者点击 image2 时，它应该转到 test2 并且应该折叠 test 1。

HTML 代码

<p class="trigger"><a href="#!">Test1</a></p>
<div class="toggle_container" id="1">
<div class="block">
    <p>Contents of test1 to be displayed</p>        
</div>
<div>
<p class="trigger"><a href="#!">Test2</a></p>
<div class="toggle_container" id="2">
<div class="block">
    <p>Contents of test2 to be displayed</p>        
</div>
<div>

CSS

p.trigger{
margin-bottom:7px;
margin-top:-5px;
color: #545454;
text-decoration: none;
}

.toggle_container{
margin-bottom:10px;
}

.toggle_container p{
margin:0px;
text-decoration: none;
}

.toggle_container{
background:#f0f0f0;
clear: both;
font-size:100%;
}

p.trigger a {
color: #545454;
text-decoration: none;
}

p.trigger a:link, p.trigger a:visited {
color: #545454;
text-decoration: none;
}

p.trigger a:hover, p.trigger a:active {
color: #ff00ff;
}

Javascript

$(document).ready(function() {
$(".toggle_container:not(:first)").hide();

$("p.trigger").on('click', function(){
$('.toggle_container').slideUp().eq($(this).index('p.trigger')).stop().slideToggle();
return false;
});

做了很多搜索并尝试了很多代码，但对我没有任何帮助。请帮忙！！！谢谢

http://jsfiddle.net/bL9Le/似乎没有工作，但在网站上工作。

4

2 回答 2

0

我找到了我的解决方案。只是为了帮助别人，这里是代码

<script>
window.onload = function() {
    var hash = window.location.hash;
    if (hash != "") {
        var id = hash.substr(1);
        $(".toggle_container:not(:active)").hide();
        document.getElementById(id).style.display = 'block';
    }
}
</script>
于 2014-05-25T06:12:36.160 回答
0

你在那个小提琴中有几个错误。您的 div 没有关闭，也没有选择 jQuery 在小提琴中使用。将此作为替代解决方案进行检查。

$(document).ready(function()
{
    $(".toggle_container").hide();

    $(".trigger").on('click', function(e)
    {
        $('.toggle_container').slideUp(500, function()
        {
            $(e.target).next('.toggle_container').slideDown(500);
        });
        return false;
    });
});
于 2014-05-24T15:19:30.893 回答