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');
});

​​​​​​​​​​​​​​​​​​​​​​​​​​

#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

尝试这个

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