0
У меня есть код, который я использую для отображения html-страницы в теге div на основе нажатия миниатюр в другом теге div.Ссылка на пункт назначения в HTML-странице
У меня возникла проблема с размещением тега привязки к тегу 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>
Благодарим за отзыв, но я все еще не уверен, что вы имеете в виду. и я не могу получить доступ к вашей ссылке. Пожалуйста, я могу попросить пример в моем существующем коде. Я хотел бы, чтобы при нажатии следующей ссылки на изображение она прокручивается до тега rightcolum div.
Перейдите к исходному коду и поместите '# leftcolumn' в конец URL. Это приведет вас к этой точке, потому что есть элемент с id = "leftcolumn" ' –
, так будет ли это так?