0
これはプロジェクト全体の一部です。主な要件は、リンククリック時に<div>をロードすることです。私はjqueryスクリプトを使用してそれを達成することができます。負荷は完全に、他の兄弟は隠れていますが、ページの上部にスクロールします。私のページには多くの2つのセクションがあり、<div>がロードされています。ロードする<div> onclickページスクロールを設定するjqueryを変更する可能性はありますか？私はfocus()とevent.preventdefault()を使ってみました。しかし、私はそれを働かせることができません。ロードされたdiv onclickにスクロールするページを設定します
ここはページのデザインです。 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;
\t 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; \t
text-decoration: none;
}
li1 a:hover {
background-color: #111;
\t 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 -->
http://stackoverflow.com/questions/6677035/jquery-scroll-to-element – apaul