我有一个包含列表的div容器,其中只有一个项目可见,其余项目被隐藏(容器具有overflow: hidden)。
我希望jQuery在点击精确链接后显示请求的项目:
我希望jQuery在点击精确链接后显示请求的项目:
有什么想法吗? scrollTo 能帮助我吗?我已经尝试了这个插件,但没有成功。我宁愿不使用iframe。
有什么想法吗? scrollTo 能帮助我吗?我已经尝试了这个插件,但没有成功。我宁愿不使用iframe。
ScrollTo可能会有帮助,但是否必须滚动呢?我认为使用 slideUp()
和 slideDown()
更好。
我稍微修改了HTML,给幻灯片项目添加了一个类和一个ID。
演示实例: http://jsfiddle.net/ztFWv/1/
<div id="slider">
<ul>
<li id="one" class="slideItem">
<h1>Header #1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
</li>
<li id="two" class="slideItem">
<h1>Header #2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
</li>
<li id="three" class="slideItem">
<h1>Header #3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
</li>
</div>
<a href="javascript:void(0);" class="one">Scroll to #1</a>
<a href="javascript:void(0);" class="two">Scroll to #2</a>
<a href="javascript:void(0);" class="three">Scroll to #3</a>
JS
$('a').click(function(){
var linkClass=$(this).attr('class');
$('.slideItem:visible').slideUp('fast',function(){
$('#' + linkClass).slideDown('fast');
});
});
更新
如果你一定要滚动 :)
这里有一个示例:http://jsfiddle.net/ztFWv/3/
包含 scrollTo JS 文件并以此方式使用命令。
$('a').click(function(){
$('#slider').scrollTo( $('#' + $(this).attr('class')), 800 );
});
我最喜欢的方法是在标签中添加tabindex="0"
属性,然后调用focus()
使元素获得焦点,这将使浏览器将其滚动到视图中。
虽然它不能为您提供很多控制权,但它是原生的滚动并且非常流畅。
<p>
<h1>Vertical scrolling</h1>
<button class="shift up" value="updown" >^</button>
<button class="shift vertical" value="updown Av">A</button> <button class="shift vertical" value="updown Bv">B</button>
<div id="updown">
<div id="Av"> AAAAAAA text AAAAAAA </div>
<div id="Bv"> BBBBBBB text BBBBBBB </div>
<div id="Cv"> CCCCCCC text CCCCCCC </div>
<div id="Mv"> MMMMMMM text MMMMMMM </div>
</div>
<button class="shift down" value="updown" >v</button>
<button class="shift vertical" value="updown Cv">C</button> <button class="shift vertical" value="updown Mv">M</button>
</p>
<p>
<h1>Horizontal scrolling</h1>
<button class="shift right" value="leftright" >></button>
<button class="shift horizontal" value="leftright Ah">A</button> <button class="shift horizontal" value="leftright Bh">B</button>
<div id="leftright">
<span id="Ah"> AAAAAAA text AAAAAAA </span>
<span id="Bh"> BBBBBBB text BBBBBBB </span>
<span id="Ch"> CCCCCCC text CCCCCCC </span>
<span id="Mh"> MMMMMMM text MMMMMMM </span>
</div>
<button class="shift left" value="leftright"><</button>
<button class="shift horizontal" value="leftright Ch">C</button> <button class="shift horizontal" value="leftright Mh">M</button>
</p>
CSS 是:
#updown, #leftright{
position: relative;
overflow: hidden;
line-height: 1.5em;
height: 1.5em;
width: 20em;
border: 2px solid #000;
}
#updown div {
position: absolute;
height: 1.5em;
width: 20em;
margin: 0;
padding: 0;
border: 0;
}
#leftright span {
position: absolute;
display: inline;
float: left;
height: 1.5em;
width: 20em;
margin: 0;
padding: 0;
border: 0;
}
JavaScript 代码如下:
// See it in action at http://jsfiddle.net/Q7FFN/
$('#updown div').each(function(i){ // position the "divs"
var $this = $(this);
var amount = $this.parent().height();
$this.css({top: i * amount});
});
$('#leftright span').each(function(i){ // position the "spans"
var $this = $(this);
var amount = $this.parent().width();
$this.css({left: i * amount});
});
$('.shift').click(function(){
var $this = $(this);
var value = $this.attr('value');
var values = value.split(/ +/);
var items = '#' + values[0];
var item = (values.length == 2) ? '#' + values[1] : '';
var classes = $this.attr('class');
if (classes.match(/\bup\b/)) { // up - Use "match" instead of hasClass() for performance
var amount =$(items).height();
$(items).children().animate({top: '-=' + amount}, 'slow');
} else if (classes.match(/\bdown\b/)) { // down
var amount =$(items).height();
$(items).children().animate({top: '+=' + amount}, 'slow');
} else if (classes.match(/\bleft\b/)) { // left
var amount = $(items).width();
$(items).children().animate({left: '-=' + amount}, 'slow');
} else if (classes.match(/\bright\b/)) { // right
var amount = $(items).width();
$(items).children().animate({left: '+=' + amount}, 'slow');
} else if (classes.match(/\bvertical\b/)) { // vertical
var amount = $(item).css('top');
console.log("amount=", amount);
$(items).children().animate({top: '-=' + amount}, 'slow');
} else if (classes.match(/\bhorizontal\b/)) { // horizontal
var amount = $(item).css('left');
$(items).children().animate({left: '-=' + amount}, 'slow');
} else {
return false;
}
});
jQuery().scrollTo(itemClass);
,但是什么都没有发生,我知道这很糟糕,但我做错了什么?:( - anonymous