2014-01-13 51 views
0

我有一些代碼用於在div標籤中顯示基於點擊不同div標籤中的縮略圖圖像的html頁面。在HTML頁面中鏈接到目的地頁面

我遇到的問題是將一種類型的錨標籤放置在加載html頁面的div標籤中,以便頁面自動向下滾動。

從我看到它是不可能在一個標籤內放置一個標籤,所以我不知道這是甚至可能與我目前的代碼,我將不勝感激任何幫助或建議,我是網頁設計新手

我的代碼

示例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- 
Design by Free CSS Templates 
http://www.freecsstemplates.org 
Released for free under a Creative Commons Attribution 2.5 License 

Name  : Seascape 
Description: A two-column, fixed-width design with dark color scheme. 
Version : 1.0 
Released : 20131201 

--> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Home</title> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800" rel="stylesheet" /> 
<link href="default.css" rel="stylesheet" type="text/css" media="all" /> 
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" /> 

<script type="text/javascript"> 

/*********************************************** 
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com) 
* This notice MUST stay intact for legal use 
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code 
***********************************************/ 

var loadedobjects="" 
var rootdomain="http://"+window.location.hostname 

function ajaxpage(url, containerid) 

{ 
var page_request = false 
if (window.XMLHttpRequest) // if Mozilla, Safari etc 
page_request = new XMLHttpRequest() 
else if (window.ActiveXObject){ // if IE 
try { 
page_request = new ActiveXObject("Msxml2.XMLHTTP") 
} 
catch (e){ 
try{ 
page_request = new ActiveXObject("Microsoft.XMLHTTP") 
} 
catch (e){} 
} 
} 

else 
return false 
page_request.onreadystatechange=function(){ 
loadpage(page_request, containerid) 
} 
page_request.open('GET', url, true) 
page_request.send(null) 
} 

function loadpage(page_request, containerid){ 
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) 
document.getElementById(containerid).innerHTML=page_request.responseText 
} 

function loadobjs(){ 
if (!document.getElementById) 
return 
for (i=0; i<arguments.length; i++){ 
var file=arguments[i] 
var fileref="" 
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding 
if (file.indexOf(".js")!=-1){ //If object is a js file 
fileref=document.createElement('script') 
fileref.setAttribute("type","text/javascript"); 
fileref.setAttribute("src", file); 
} 
else if (file.indexOf(".css")!=-1){ //If object is a css file 
fileref=document.createElement("link") 
fileref.setAttribute("rel", "stylesheet"); 
fileref.setAttribute("type", "text/css"); 
fileref.setAttribute("href", file); 
} 
} 
if (fileref!=""){ 
document.getElementsByTagName("head").item(0).appendChild(fileref) 
loadedobjects+=file+" " //Remember this object as being already added to page 
} 
} 
} 

</script> 

<style type="text/css"> 
#leftcolumn{ 
    float: none; 
    width: 959px; 
    height: auto; 
    border: 3px none black; 
    padding: 5px; 
    padding-left: 5px; 
    margin-top: -61px; 
    min-width: 900px; 
    min-height: 300px; 
    margin-left: auto; 
    margin-right: auto; 
    position: static; 
} 

#leftcolumn a{ 
padding: 3px 1px; 
display: block; 
width: 100%; 
text-decoration: none; 
font-weight: bold; 
border-bottom: 1px solid gray; 
} 

#leftcolumn a:hover{ 
    background-color: #CCCCCC; 
} 

#rightcolumn{ 
    float: none; 
    width: 1000px; 
    min-height: 275px; 
    border: 3px none black; 
    padding: 5px; 
    padding-bottom: 5px; 
    margin-top: 13px; 
    margin-bottom: 143px; 
    min-width: 1000px; 
    background-color: #FFFFFF; 
    position: static; 
    margin-left: auto; 
    margin-right: auto; 
} 

* html #rightcolumn{ /*IE only style*/ 
    float: left; 
    width: 1200px; 
    min-height: 400px; 
    border: 3px solid black; 
    margin-left: 66px; 
    padding: 5px; 
    padding-bottom: 5px; 
    margin-top: 12px; 
    margin-bottom: 143px; 
    min-width: 1450px; 
    background-color: #FFFFFF; 
} 
</style> 

</head> 
<body> 
<div id="header-wrapper"> 
    <div id="header" class="container"> 
     <div id="logo"> 
      <h1><a href="Index.html">VapeCulture</a></h1> 
<p><span style="FONT-SIZE: 8pt; color: #666; text-align: center;"> Smoking is dead, Vaping is the future, and the future is NOW!</span></p> 
     </div> 
     <div id="menu"> 
      <ul> 
       <li><a href="index.html" accesskey="1" title="">Home</a></li> 
       <li class="current_page_item"><a href="Vapes.html" accesskey="2" title="">Vapes</a></li> 
       <li><a href="Juice.html" accesskey="3" title="">Juice</a></li> 
       <li><a href="Accessories.html" accesskey="5" title="">Accessories</a></li> 
       <li><a href="AboutVaping.html" accesskey="5" title="">About Vaping</a></li> 
       <li><a href="AboutUs.html" accesskey="5" title="">About Us</a></li> 
       <li><a href="ContactUs.html" accesskey="5" title="">Contact</a></li> 
      </ul> 
     </div> 
    </div> 

</div> 
<div id="featured"> 
<div id="leftcolumn"> 
<div id="Thumbnail1"><a href="javascript:ajaxpage('ItasteEP.html', 'rightcolumn');"> 

    <img src="images/EP/thumbnail.png" width="172" height="205" alt=""/></a></div> 

    <div id="leothunb"><a href="javascript:ajaxpage('ItasteLeoPro.html', 'rightcolumn');"><img src="images/LeoPro/leothumbnail.png" width="172" height="205" alt=""/></a></div> 

    <div id="VVthumb"><a href="javascript:ajaxpage('ItasteVV3.html', 'rightcolumn');"><img src="images/VV/VVthumbnail.png" width="172" height="205" alt=""/></a></div> 
<div id="MVDthumb"><a href="javascript:ajaxpage('ItasteMVP2.html', 'rightcolumn');"><img src="images/mvp/MVPthumbnail.png" width="172" height="205" alt=""/></a></div> 
<div id="SVDthumb"><a href="javascript:ajaxpage('ItatseSVD.html', 'rightcolumn');"><img src="images/sVd/sVdthumbnail.png" width="172" height="205" alt=""/></a></div> 
<div id="VTRthumb"><a href="javascript:ajaxpage('ItasteVTR.html', 'rightcolumn');"><img src="images/tvr/VTRthumbnail.png" width="172" height="205" alt=""/></a></div> 

<div id="new134tag"><a href="javascript:ajaxpage('Itaste134.html', 'rightcolumn');"><img src="images/134/134thumbnail.png" width="172" height="205" alt=""/></a></div> 
<div id="coolfire1thumb"><a href="javascript:ajaxpage('CoolFire1.html', 'rightcolumn');"><img src="images/coolfire1/Coolfire1thumbnail.png" width="172" height="205" alt=""/></a></div> 
<div id="Coolfire2thumb"><a href="javascript:ajaxpage('CoolFire2.html', 'rightcolumn');"><img src="images/coolfire2/Coolfire2thumbnail.png" width="172" height="205" alt=""/></a></div> 
<div id="AIOthumb"><a href="javascript:ajaxpage('AOI.html', 'rightcolumn');"><img src="images/aio/aoithumbnail.png" width="172" height="205" alt=""/></a></div> 


    </div> 



<div id="rightcolumn"><h3><img src="InnokinHeaderV1.png" width="1000" height="275" alt=""/></h3> 
</div> 
<div style="clear: left; margin-bottom: 1em"></div> 

</div> 

<div id="banner-wrapper"> 
    <div id="banner" class="container"> 
     <div class="box-left"> 
      <h2>Delivery and collection options available</h2> 
      </div> 
     <div class="box-right"> <a href="ContactUs.html" class="button button-big">Order Now</a></div> 
    </div> 
</div> 
<div id="wrapper"></div> 
<div id="copyright" class="container"> 
    <p>Vape culture Cape Town south africa 2013 </p> 
    <p>happy vaping</p> 
</div> 
</body> 
</html> 

回答

0

如果設置了id屬性,你可以使用同一個錨標記:

<div id="my-point"></div> 

網址:http://example.com/#my-point

+0

謝謝你的迴應,但我仍然不確定你的意思。我無法訪問你的鏈接,請問我現有的代碼中有一個例子。我希望當點擊下面的圖像鏈接時,它會向下滾動到rightcolum div標籤。

user3133180

+0

轉到現有代碼的實時位置,並在URL的末尾放置'#leftcolumn'。它會帶你到那一點,因爲有'id =「leftcolumn」' –

+0

這樣的元素,它會是這樣嗎?

user3133180