Question

我是JS的新手，对HTML / CSS知之甚少，所以我们非常感谢任何帮助。我有几周时间在服务器上发布我的网站

我喜欢这些东西。它非常好地扩展/折叠，我对结果很满意。我面临的问题是，我的网站上有一个图像轮播，并希望将其链接到div。

例如：当访问者点击image2时，它应该转到test2并且应该折叠测试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/似乎不起作用，但在网站上工作。

Answer 1

你在那个小提琴里犯了几个错误。你的div没有关闭，并且没有选择jQuery用于小提琴。 Check this out as an alternative solution.

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

Answer 2

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

<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>

锚点链接从图像轮播到产品页面上的切换div

2 个答案: