0

私は素晴らしいULスライドjQueryプラグインを使用しています。通常は問題ありませんが、現在、いくつかの問題が発生しています。

金曜日のクイズを作成しています。質問に答えたら、質問をスライドさせてもらいたいです。ただし、ボックスをクリックすると、次のliではなく、「フレーム間」にスライドします。

これが私のサイトです：http：//carlpapworth.com/friday-quiz/

これが私のコードです：

html：

  <ul id="qBox">
    <!--Q1-->           <li class="qContainer">
                            <div class="qQuestion">Question I
                            </div>
                            <ul class="qAnswers">
                                <li><a href="#" class="qWrong"><h3>Answer 1</h3></li>
                                <li><a href="#" class="qCorrect"><h3>Answer 2</h3></li>
                                <li><a href="#" class="qWrong"><h3>Answer 3</h3></li>
                            </ul>
                        </li>
    <!--Q2-->           <li class="qContainer">
                            <div class="qQuestion">Question II
                            </div>
                            <ul class="qAnswers">
                                <li><a href="#" class="qWrong"><h3>Answer 1</h3></li>
                                <li><a href="#" class="qCorrect"><h3>Answer 2</h3></li>
                                <li><a href="#" class="qWrong"><h3>Answer 3</h3></li>
                            </ul>
                        </li>
    <!--Q3-->           <li class="qContainer">
                            <div  class="qQuestion">Question III
                            </div>
                            <ul class="qAnswers">
                                <li><a href="#" class="qWrong"><h3>Answer 1</h3></li>
                                <li><a href="#" class="qCorrect"><h3>Answer 2</h3></li>
                                <li><a href="#" class="qWrong"><h3>Answer 3</h3></li>
                            </ul>
                        </li>
    </ul>

CSS：

#qBox{
width: 2000px;
height: 260px;
}

li.qContainer {
/*
position: relative;
width: 100%!important;
height: 100%!important;
padding: 0px 0px;
float: left;
border: solid 1pt;
*/
}

.qQuestion {
width: 480px;
height: 50px;
padding: 10px 0px;
font-family: corbel;
font-size: 34px;
text-align: center;
color: #ffffff;
}

.qQuestion:after {
content: url(../images/questionShadow.png);
width: 100%;
margin-top: -24px;
padding: 0 0 20px 0;
height: 2px;
display: block;
}

.qAnswers {
width: 460px;
padding: 10px;
height: auto;
text-align: center;
}

.qAnswers li {
height: 30px;
padding: 10px;
}

.qAnswers li:after {
content: url(../images/questionShadow.png);
width: 100%;
margin-top: -8px;
height: 2px;
display: block;
}

.qAnswers li a{
width: 100%;
font-family: silverfake;
font-size: 26p
}

JS：

$(document).ready(function() {
            $('#qBox').ulslide({
                    effect: {
                        type: 'slide', // slide or fade
                        axis: 'x',     // x, y
                        distance: 0   // Distance between frames
                    },
                    duration: 2000,
                    autoslide: 0,
                    width: 500,
                    height: 300,
                    mousewheel: false,
                    nextButton: '.qAnswers a',
                    prevButton: '#e1_prev'
            });
});
4

2 に答える 2

1

HTMLコードにいくつかの問題があります。LIを見てください。

 <li><a href="#" class="qWrong"><h3>Answer 1</h3></li>

あなたのAは閉じていません、これがあなたの問題だと思います。

于 2013-02-19T08:59:01.343 に答える
0

理解してください..あなたは<a>タグを閉じるのを逃しています...</a>

<li><a href="#" class="qWrong"><h3>Answer 1</h3></a></li>   
                                            ----^^^---- here

ここでフィドルで試してみてください

于 2013-02-19T09:05:25.027 に答える