链接到HTML页面中的目标

时间:2014-01-13 13:19:09

标签: html ajax hyperlink

我有一些代码用于在div标签中显示html页面,基于点击不同div标签中的缩略图。

我遇到的问题是在div标签上放置一种锚标签,其中加载了html页面,以便页面自动向下滚动。

从我所看到的,不可能在标签中放置标签,所以我不确定这是否可以使用我当前的代码,我将不胜感激任何帮助或建议,我是网页设计的新手

我的代码示例如下:

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

1 个答案:

答案 0 :(得分:0)

如果设置了id属性,则可以使用与锚标记相同的内容:

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

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