1

こんにちは、いくつかの箇条書きをロールオーバー/クリックして、ページ (説明) 内のテキストを置き換える div をターゲットにできるようにする必要があります。誰かに何かアイデアはありますか?

JS

$(document).ready(function(){
    $('.bullet').click(function(){
        $('.bullet').removeClass("active");
        $(this).addClass("active");
    });   
});

CSS

.bullet {
    display:block;
    margin: 0 0 0 3px;
    float: right;
    width:10px;
    height:10px;
    background:url(../images/bullets.jpg) 0 0 no-repeat;
}

.bullet:active {
    display:block;
    margin: 0 0 0 3px;
    float: right;
    width:10px;
    height:12px;
    background:url(../images/bullets.jpg) 0 -14px no-repeat;
}

.numbers a {
    display: block;
}

.numbers a div {
    font-family: HelveticaNeueLTPro-Roman, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #6e6965;
    margin: -10px 0 0 0px;
    position: absolute;
    display:none;
}

.numbers a:hover div, .numbers a:focus div {
    display: block;
}

HTML

<div id="bullet-container"><div class="numbers">
    <span onmouseover="document.rollimg.src=image1.src;">
        <a class="bullet" tabindex="-1">
            <div>1</div>
        </a>
    </span>
    <span onmouseover="document.rollimg.src=image2.src;">
        <a class="bullet" tabindex="-1">
            <div>2</div></a>
    </span>
    <span onmouseover="document.rollimg.src=image3.src;">
        <a class="bullet" tabindex="-1">
            <div>3</div>
        </a>
    </span>
    <span onmouseover="document.rollimg.src=image4.src;">
        <a class="bullet" tabindex="-1">
            <div>4</div>
        </a>
    </span>
</div>

<div class="description">hello</div>
4

1 に答える 1

1

テキストを格納する場所が必要になるため、 data 属性を使用して要素にテキストを追加します

<a data-description="hello, I am the first bullet" class="bullet" tabindex="-1">1</a>

次に、クリックしているアイテムから'$('.description')'テキストを設定するだけです。'data-description''$(this)'

最初のものを自動的に選択するには'.bullet'、ドキュメントの準備ができたときに最初にクリックイベントを発生させることができます

<script type="text/javascript">
$(document).ready(function(){

  // Set up click event
  $('.bullet').click(function(){
    $('.bullet').removeClass("active");
    $(this).addClass("active");
    $('.description').text($(this).data('description'))
  });  

  // Click the first item
  $('.bullet:first').click();

});
</script>

実施例

http://jsfiddle.net/blowsie/jtnsP/

于 2012-07-05T14:09:32.023 に答える