0

私はJSが初めてで、HTML / CSSを少し知っているので、助けていただければ幸いです。ウェブサイトをサーバーに公開するのに 1 週​​間の時間がありました

私が好きなように、私は物事を機能させました。それは非常によく伸びたり縮んだりして、結果に満足しています. 私が直面している問題は、Web サイトに画像カルーセルがあり、それを 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

そのフィドルにはいくつかの間違いがありました。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 に答える
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 に答える