As a novice coder with limited English skills, I apologize in advance. Here is the CSS code snippet I am working with:
#wrapper{
width: 200px;
height: 300px;
border: solid 1px #000;
overflow: visible;
white-space: nowrap;
}
.page{
display: inline-block;
margin-right: -4px;
width: 200px;
height: 300px;
}
#page1{
background-color: #CF9;
}
#page2{
background-color: #FC9;
}
#page3{
background-color: #99F;
}
h1{
color: white;
}
The HTML structure looks like this:
<div id="wrapper">
<div class="page" id="page1"><h1>page1</h1>
<ul>
<li><a href="#page1">page 1</a></li>
<li><a href="#page2">page 2</a></li>
<li><a href="#page3">page 3</a></li>
</ul>
</div>
... (HTML for page 2 and 3 here)
</div>
Additionally, there's some Jquery code:
$( document ).ready(function() {
$(".page a").click(function(){
fromURL=$(this).closest(".page").attr("id");
toURL = $(this).attr("href");
$(toURL).insertAfter(fromURL);
//$("#page3").insertAfter("#page1"); //this works
})
});
I have noticed that .insertAfter function does not work with variables. How can I overcome this issue?