我正在尝试在点击链接时在链接下添加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,我确信这段代码可以改进。
任何帮助都将不胜感激。
答案 0 :(得分: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);
});
答案 1 :(得分: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}
<强> Check Fiddle 强>
答案 2 :(得分: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()
});