0

リンクがクリックされたときにリンクの下に追加しようとしdivています。次のリンクがクリックされた後にそのボックスが消え、次のリンクの下に別のdivボックスが表示されます。

これが私が取り組んでいるフィドルです：http：//jsfiddle.net/d0okie0612/geJM3/

HTML：

<div id="blackbar">
    <a class="link" href="#">Click here</a>
    <a class="link2" href="#">Click here</a>
    <a class="link3" href="#">Click here</a>
</div>

JavaScript：

$('a.link').on('click', function (e) {
    e.preventDefault();
    $('<div class="whitebar"><p>1</p></div>').appendTo('div#blackbar');
});

$('a.link2').on('click', function (e) {
    e.preventDefault();
    $('<div class="whitebar2"><p>2</p></div>').appendTo('div#blackbar');
});

$('a.link3').on('click', function (e) {
    e.preventDefault();
    $('<div class="whitebar3"><p>3</p></div>').appendTo('div#blackbar');
});

CSS：

#blackbar  { background: black; width: 900px; height: 200px;}
.whitebar  { background: white; width: 40px; height: 30px; border: solid purple; z-index: 1000;}
.whitebar2 { background: white; width: 40px; height: 30px; border: solid purple; z-index: 1000; position: absolute; left: 90px;}
.whitebar3 { background: white; width: 40px; height: 30px; border: solid purple; z-index: 1000; position: absolute; left: 190px;}
a { color:white;}

私はまだjQueryを学んでいます、このコードは改善できると確信しています。

どんな助けでもいただければ幸いです。

4

3 に答える 3

2 
$('#blackbar a').on('click', function(e){
    e.preventDefault();
    $('.whitebar').remove()
    $('<div />', {'class': 'whitebar', html: '<p>'+($(this).index()+1)+'</p>'})
        .appendTo('div#blackbar').css('left', $(this).offset().left);
});
​

フィドル

于 2012-12-11T22:18:13.493 に答える
1 
<div id="blackbar">
   <a class="link" href="#">Click here</a>
   <div class="whitebar"><p>1</p></div>    
   <a class="link2" href="#">Click here</a>
   <div class="whitebar2"><p>2</p></div>        
   <a class="link3" href="#">Click here</a>
   <div class="whitebar3"><p>3</p></div>        
</div>


$('#blackbar a').on('click', function(e){
    e.preventDefault();
    $(this).siblings('div').hide().end().next().show()
});

http://jsfiddle.net/x2ByZ/

于 2012-12-11T22:24:22.037 に答える
1

これを試して

Js

$('a').on('click', function(e){
    e.preventDefault();
    var $this = $(this);
    var classname = $(this).data('classname'); 
    var index = $this.index() + 1;
    var html = '<div class="dot '+classname + '"><p>' + index + '</p></div>';
    $('#blackbar').find('.dot').remove().end().append(html);

});

HTML

<div id="blackbar">
<a class="link" href="#" data-classname="whitebar">Click here</a>
<a class="link2" href="#" data-classname="whitebar2">Click here</a>
<a class="link3" href="#" data-classname="whitebar3">Click here</a>
</div>​

CSS

#blackbar{background: black; width: 900px; height: 200px;}

.dot
{
    background: white; 
    width: 40px; 
    height: 30px;
    border: solid purple;
    z-index: 1000;
}

.whitebar2
{
    position: absolute;
    left: 90px;
}

.whitebar3
{
    position: absolute;
    left: 190px;
}
a{color:white}

</ p>

フィドルをチェック

于 2012-12-11T22:23:12.983 に答える