Javascript 转到div+；更改选项卡
我有一个选项卡菜单（3个选项卡），我想知道，如果有这样的代码：我按下一个按钮，然后我会自动转到网站顶部（例如“转到div”），并自动将选项卡更改为第二个 大概是这样的：Javascript 转到div+；更改选项卡,javascript,jquery,xcode,Javascript,Jquery,Xcode,我有一个选项卡菜单（3个选项卡），我想知道，如果有这样的代码：我按下一个按钮，然后我会自动转到网站顶部（例如“转到div”），并自动将选项卡更改为第二个 大概是这样的： （来源：）如果我理解正确，这里有一个 和纯代码示例： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> *
（来源：）如果我理解正确，这里有一个 和纯代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
}
html, body {
height: 100%;
width: 100%;
}
.movingmenu {
border-radius: 10px;
background: #000;
padding: 10px 40px;
color: #fff;
width: 40%;
position:absolute;
left: 30%;
top: 10%;
}
.tabmenu div {
background: #fff;
color: #000;
padding: 5px 30px;
text-align:center;
display: inline-block;
margin: 0 20px 0 0;
text-decoration:none;
border-radius: 10px;
margin-bottom: 20px;
}
.tabmenu div.active {
background: purple;
color: white;
font-weight: bold;
}
.tabcontent2, .tabcontent3 {
display: none;
}
#header {
width: 100%;
height: 100px;
background: #900;
}
#content1 {
width: 100%;
height: 300px;
background: #09C;
}
#content2 {
width: 100%;
height: 400px;
background: #FC6;
}
.gotobtn {
background: #fff;
color: purple;
padding: 5px 30px;
text-align:center;
display: inline-block;
margin: 0 20px 0 0;
text-decoration:none;
border-radius: 10px;
margin-bottom: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="header"></div>
<div id="content1"></div>
<div id="content2"></div>
<div class="movingmenu">
<div class="tabmenu">
<div>Tab 1</div>
<div>Tab 2</div>
</div>
<div class="tabcontent1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu finibus libero. Nulla cursus tempor elit, id luctus nunc pulvinar aliquet. Sed luctus nibh nulla, ut sollicitudin turpis facilisis in. Quisque tempor blandit mi, in ultrices sapien hendrerit in. Sed aliquet, leo quis varius imperdiet, dolor justo vestibulum dui, at vulputate arcu nisl dictum libero. Phasellus eget convallis nibh, vel aliquam nisl. Vestibulum pretium est lacus, ac consectetur tellus vestibulum a. Praesent efficitur sollicitudin nisi. Maecenas id ante at ex semper placerat. Nunc in gravida arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In dictum, est sollicitudin lacinia luctus, urna magna malesuada nisi, et malesuada massa ipsum vel sapien. Integer vel interdum est. </div>
<div class="tabcontent2">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent egestas ex et lorem porta feugiat. Nullam pulvinar suscipit leo id posuere. Vestibulum placerat massa massa, a volutpat ex bibendum vitae. Cras hendrerit tortor est. Aliquam at semper purus, ut varius est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam at ex orci. Vivamus eget dignissim dolor, at hendrerit lacus. Nullam facilisis nunc vitae tincidunt interdum. </div>
<a href="#" data-ref="header" class="gotobtn">Odnosnik</a>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('.gotobtn').click(function(e) {
e.preventDefault();
$(".movingmenu").animate({
left: 0,
top: 0
}, 1000, function() {
$('.tabmenu div:last-child').addClass('active');
$('.tabcontent1').hide();
$('.tabcontent2').show();
});
});
</script>
</body>
</html>
无标题文件
* {
框大小：边框框；
保证金：0；
填充：0；
字体系列：无衬线；
}
html，正文{
身高：100%；
宽度：100%；
}
.移动菜单{
边界半径：10px；
背景：#000；
填充：10px 40px；
颜色：#fff；
宽度：40%；
位置：绝对位置；
左：30%；
排名前10%；
}
.tabmenu div{
背景：#fff；
颜色：#000；
填充：5px30px；
文本对齐：居中；
显示：内联块；
利润率：0.20px 0.0；
文字装饰：无；
边界半径：10px；
边缘底部：20px；
}
.tabmenu div.active{
背景：紫色；
颜色：白色；
字体大小：粗体；
}
.tabcontent2、.tabcontent3{
显示：无；
}
#标题{
宽度：100%；
高度：100px；
背景：#900；
}
#内容1{
宽度：100%；
高度：300px；
背景：#09C；
}
#内容2{
宽度：100%；
高度：400px；
背景:#FC6；
}
哥顿先生{
背景：#fff；
颜色：紫色；
填充：5px30px；
文本对齐：居中；
显示：内联块；
利润率：0.20px 0.0；
文字装饰：无；
边界半径：10px；
边缘底部：20px；
边缘顶部：20px；
}
表1
表2
Lorem ipsum dolor sit amet，是一位杰出的献身者。整型eu finibus libero。暂时的精英，我是卢克图斯·努克·普尔文纳·阿利奎特。这是一个非常简单的例子，但这是一个非常简单的例子。我是一个临时的温文尔雅的人，他是一个智者。塞德·阿利奎特（Sed aliquet），利奥·奎斯·瓦里乌斯（leo quis varius imperdiet），多洛·胡斯托（dolor justo）前庭酒后驾车（dui），在自由放任的宣言中。这是一个很好的例子。前庭前腔，前庭a。尼西索利西丁的临床疗效。梅塞纳斯的身份证在前三个月下注。Nunc在孕期arcu。虎口浮雕和肘部浮雕同侧前庭；在格言中，最重要的是解决问题的方法，比如说解决问题的方法，解决问题的方法，以及解决问题的方法。整数级中间测试。
佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。这是一个很好的例子。普尔文纳号是狮子座的。前庭放置按摩器，是一种螺旋形的前生命体。克拉斯·亨德雷特是侵权者。阿利奎姆在塞姆佩普鲁斯，乌特瓦里乌斯东部。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。阿利奎姆在前奥奇。亨德雷特·拉库斯的维瓦摩斯·埃吉特·迪格森·多洛。不允许任何设施的存在。
$（'.gotobN'）。单击（函数（e）{
e、 预防默认值（）；
$（“.movingmenu”）.animate({
左:0,，
排名：0
}，1000，函数（）{
$（'.tabmenu div:last child'）.addClass（'active'）；
$（'.tabcontent1'）.hide（）；
$（'.tabcontent2'）.show（）；
});
});