gpt4 book ai didi

javascript - 设置页面滚动到加载的 div onclick

转载 作者:行者123 更新时间:2023-11-28 05:27:57 25 4
gpt4 key购买 nike

这是整个元素的一部分。主要要求是加载 <div>单击链接后。我能够使用 jquery 脚本实现它。加载完美,其他同级 div 隐藏,但它滚动到页面顶部。我的页面有很多两个部分 <div>加载它们。是否有可能修改 jquery 以设置页面滚动加载 <div>点击。我尝试使用 focus()event.preventdefault() .但我无法让它工作。

这是页面的设计。 WEBPAGE DESIGN .

$(document).ready(function(){
$('a').click(function () {
var divname= this.name;
$("#"+divname).show("slow").siblings().hide("fast");
});
});
#header {

background-color:#A4E2F4;
color:Black;
text-align:center;
padding:20px;
}
input, textarea{
background-color:#B7F9EB;
color: Black;
}
textarea {
border-radius: 6px;
border: 1px solid Black;
outline: none;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: inline-block;


}

ul2 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #9B9A9A;
display: inline-block;


}

li1 {
float: left;
border-right: 1px solid #bbb;
}

li1 a {
display: block;
color: white;
text-align: center;
padding: 12px 16px;
text-decoration: none;
}

li1 a:hover {
background-color: #111;
color: white;
}


#section {
width:auto;
height:auto;
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
float:center;
padding:30px;
}


#section2 {
width:auto;
height:auto;
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
float:center;
padding:30px;
background-color:#eeeeee;
}




/* Vertical nav bar */
vl {
list-style-type: none;
line-height:30px;

float: left;
height:auto;
width: 200px;
background-color: #EEEEEE;
padding: 10px;
}

li2 a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

li2 a:hover {
background-color: #555;
color: white;
}

li3 a {
display: block;
color: #000;
padding: auto;
width: auto;
text-decoration: none;
}

li3 a:hover {
color: blue;
}


/* End of nav bar */


#footer {
Width:auto;
background-color:#F2F2F2;
color:Black;
clear:both;
text-align:center;
padding:4px;
}
<TABLE>
<center>
<ul>
<li1><a href="#" name="div100" >MAIN1</a></li1>
<li1><a href="#" name="div200" >MAIN2</a></li1>

</UL>


<UL2>

<div id="div100" style="display:none" align="left">

<li1><a href="#" name="div1" >SUBMAIN1</a></li1>
<li1><a href="#" name="div3" >SUBMAIN2</a></li1>
<li1><a href="#" name="div5" >SUBMAIN3</a></li1>

</div>


<div id="div200" style="display:none" align="left">


<li1><a href="#" name="div9" >SUBMAIN4</a></li1>
<li1><a href="#" name="div10" >SUBMAIN5</a></li1>
<li1><a href="#" name="div11" >SUBMAIN6</a></li1>

</UL2>
</center>
<center>

<!-- Second Link Container -->
<div id="div1" style="display:none" align="left">
<div id="section">
</div>
<div id="section2">
<Center><B>SOME LINK LIST<h6><i>(Click on links below)</i></h6> </Center></B>
<li3><a href="#" name="l1" >1. link1</a></li3>
<li3><a href="#" name="l2" >2. link2</a></li3>
<li3><a href="#" name="l3" >3. Link3</a></li3>
<li3><a href="#" name="l4" >4. link4</a></li3>
</div>
</div>


<div id="div2" style="display:none" align="left">
<div id="section">
</div>
<div id="section2">
<Center><B>SOME LINK LIST<h6><i>(Click on links below)</i></h6> </Center></B>
<li3><a href="#" name="m1" >1. link1</a></li3>
<li3><a href="#" name="m2" >2. link2</a></li3>
<li3><a href="#" name="m3" >3. Link3</a></li3>
<li3><a href="#" name="m4" >4. link4</a></li3>
</div>
</div>

</center>

<!-- Bootstrap Modal Div -->
<!-- modals goes here-->
<!-- Main Container -->

<center>
<div id="section">


<div id = "l1" style="display:none" align="left">

<form>
<h3>Select your favorite sports:</h3>
<label>
<input type="checkbox" value="football" name="sport"> Football</label>
<label>
<input type="checkbox" value="baseball" name="sport"> Baseball</label>
<label>
<input type="checkbox" value="cricket" name="sport"> Cricket</label>
<label>
<input type="checkbox" value="boxing" name="sport"> Boxing</label>
<label>
<input type="checkbox" value="racing" name="sport"> Racing</label>
<label>
<input type="checkbox" value="swimming" name="sport"> Swimming</label>
<br>
<button type="button">Get Values</button>
</form>
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >I play these games</button>
<button id = "button2" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">I dont play these games</button>
</div><!-- closing blank div -->

<div id = "l2" style="display:none" align="left">

<form>
<h3>Select your favorite sports:</h3>
<label>
<input type="checkbox" value="football" name="sport"> Football</label>
<label>
<input type="checkbox" value="baseball" name="sport"> Baseball</label>
<label>
<input type="checkbox" value="cricket" name="sport"> Cricket</label>
<label>
<input type="checkbox" value="boxing" name="sport"> Boxing</label>
<label>
<input type="checkbox" value="racing" name="sport"> Racing</label>
<label>
<input type="checkbox" value="swimming" name="sport"> Swimming</label>
<br>
<button type="button">Get Values</button>
</form>
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >I play these games</button>
<button id = "button2" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">I dont play these games</button>
</div><!-- closing blank div -->
<!--- Code goes on -->

最佳答案

添加 $(this).scrollTop($("#"+ divName);到你的功能。

关于javascript - 设置页面滚动到加载的 div onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38676575/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com