使用jquery将下拉链接到锚文本 [英] using jquery to link dropdown to anchor text
问题描述
我在我的页面上选择了下拉菜单
I this select dropdown on my page
<select id="select1" size="1" style="background-color:#FFFFD7">
<option>Choose a Position</option>
<option value="1">Job!</option>
<option value="2">Job!</option>
<option value="3">Job!</option>
<option value="4">Job!</option>
<option value="5">Job!</option>
<option value="6">Job!</option>
<option value="7">Job!</option>
<option value="8">Job!</option>
<option value="9">Job!</option>
</select>
我有一个jquery脚本,我试图一起破解。
And I have a jquery script that I tried to hack together.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#select1").change(function(){
var jump = jQuery("#select1").val();
var new_position = jQuery('#job'+jump).offset();
window.scrollTo(new_position.left,new_position.top);
return false;
});
}
</script>
一旦有人选择了这项工作,它会选择一个值,它会进入到页面中的一个锚链接
The goal is once someone selects the job, it goes to select a value, it goes to an anchor-link down the page
<a href="job1"></a>
。任何帮助将不胜感激!
Hopefully without a refresh. Any help would be appreciated!
推荐答案
这个简单的工作适合我:
This easy one workes for me :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function scrollTo(target){
var targetPosition = $(target).offset().top;
$('html,body').animate({ scrollTop: targetPosition}, 'slow');
}
</script>
现在您可以使用onChange事件来执行该函数:
Now you can use the onChange event to to execute the function:
<select name="dropdpown" size="1" onChange="scrollTo(this.value)">
<option value="#link">text</option>
</select>
如果您提供这样的正确链接,一切正常!
If you provide a correct link like this everything works fine
<div id="link"> ...
我花了一段时间,因为我不习惯JavaScript,但终于找到了一个简短的和简单的解决方案。
It took me a while because I am not used to javascript, but finally found a short and easy solution that works.
绿色mz
这篇关于使用jquery将下拉链接到锚文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!