Question

这是整个项目的一部分。主要要求是在链接点击时加载<div>。我能够使用jquery脚本实现它。负载完美和其他兄弟div隐藏，但它滚动到页面的顶部。我的页面有很多两个部分，其中加载了<div>。是否有可能修改jquery以设置页面滚动加载的<div> onclick。我尝试使用focus()和event.preventdefault()。但是我无法让它发挥作用。

这是页面的设计。 WEBPAGE DESIGN。

＆＃13;

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

＆＃13;

#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; 
}

＆＃13;

<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 -->

＆＃13;

Answer 1

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

Answer 2

        var elem = $("#"+divname);
        $('html, body').animate({
            scrollTop: elem.offset().top;
        }, 800);

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

2 个答案: