如何在Tab中保留三个Html页面 [英] How Do I Keep Three Html Pages In Tab

查看：78 发布时间：2019/6/12 0:23:38 Javascript

本文介绍了如何在Tab中保留三个Html页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建了三个html页面。我想创建一个菜单，如果我点击一个菜单选项卡，它将显示第一页等等。

三个html页面是

首页

I have created three html pages.I want to create a menu and if i click one tab of menu it will show first page and so on.
the three html pages are
first page

<html>
<head>
<script type="text/javascript" src="MooTools-Core-1.5.2.js"></script>

<style type="text/css">
.DivToScroll{
    background-color: #F5F5F5;
    border: 1px solid #DDDDDD;
    border-radius: 4px 0 4px 0;
    color: #3B3C3E;
    font-size: 12px;
    font-weight: bold;
    left: -1px;
    padding: 10px 7px 5px;
text-align:center;
width:500px;
float:right;

}

.DivWithScroll{
    height:400px;
    overflow:scroll;
    overflow-x:hidden;
}
#abc
{
 display:inline-block;
    margin:5px 20px;
    padding:5px;
}
div, img {
  margin: 0;
}

div {
  padding: 0;
}
label{
  margin:10px;
}

</style>
</head>
<body>
<div class="DivToScroll">
<div class="DivWithScroll">

<table border="0">
<center>
<tr>
<td><img src="image.jpg" height="75" width="110"></td>
<td><img src="image.jpg" height="75" width="110"></td>
<td><img src="image.jpg" height="75" width="110"></td>
</tr>

<tr>
<td>caption1</td>
<td>caption2</td>
<td>caption3</td>
</tr>
</center>
</table>
<hr>
<div >

<table border="0">
<center>
<tr>
<td><img src="image.jpg" height="75" width="110"></td>
<td><img src="image.jpg" height="75" width="110"></td>
<td><img src="image.jpg" height="75" width="110"></td>
<td><img src="image.jpg" height="75" width="110"></td>
</tr>
<tr>
<td>caption1</td>
<td>caption2</td>
<td>caption3</td>
<td>caption3</td>
</tr>
<tr>
<td><img src="image.jpg" height="75" width="110"></td>
</tr>


<tr>
<td>caption3</td>
</tr>
</center>
</table>
<hr>
<table border="0">
<center>
<tr>
<td><img src="image.jpg" height="75" width="110"></td>
<td><img src="image.jpg" height="75" width="110"></td>
<td><img src="image.jpg" height="75" width="110"></td>
<td><img src="image.jpg" height="75" width="110"></td>
</tr>
<tr>
<td>caption1</td>
<td>caption2</td>
<td>caption3</td>
<td>caption3</td>
</tr>
<tr>
<td><img src="image.jpg" height="75" width="110"></td>
<td><img src="image.jpg" height="75" width="110"></td>
<td><img src="image.jpg" height="75" width="110"></td>
<td><img src="image.jpg" height="75" width="110"></td>
</tr>
<tr>
<td>caption1</td>
<td>caption2</td>
<td>caption3</td>
<td>caption3</td>
</tr>
<tr>
<td><img src="image.jpg" height="75" width="110"></td>
</tr>


<tr>
<td>caption3</td>
</tr>
</center>
</table>
<hr>
<table border="0">
<center>
<tr>
<td><img src="image.jpg" height="75" width="110"></td>
<td><img src="image.jpg" height="75" width="110"></td>
<td><img src="image.jpg" height="75" width="110"></td>
</tr>

<tr>
<td>caption1</td>
<td>caption2</td>
<td>caption3</td>
</tr>
</center>
</table>
<hr>
<div style="float:left;">
OPENING
</div>
<div style="float:left;">
<img src="question.png"/></div><br/>
<div class="form-field" style="float:left;">
<label><input type="radio">Front</label>
<label><input type="radio">Back</label>
<label><input type="radio">Side</label>
</div>
<br/>
<hr>
  <table border="0">
<center>
<tr>
<td><img src="image.jpg" height="75" width="110"></td>
<td><img src="image.jpg" height="75" width="110"></td>
<td><img src="image.jpg" height="75" width="110"></td>
<td><img src="image.jpg" height="75" width="110"></td>
</tr>

<tr>
<td>caption1</td>
<td>caption2</td>
<td>caption3</td>
<td>caption1</td>
</tr>
</center>
</table>
    </div>
<div id="appscrolldown" style="clear:both;text-align:center;"> <img style="width:120px;cursor:pointer" id="ScrollDown" src="ScrollDownArrow.png"></div>
</div>
</body>

second page

<html>
<head>
<script type="text/javascript" src="MooTools-Core-1.5.2.js"></script>

<style type="text/css">
.DivToScroll{
    background-color: #F5F5F5;
    border: 1px solid #DDDDDD;
    border-radius: 4px 0 4px 0;
    color: #3B3C3E;
    font-size: 12px;
    font-weight: bold;
    left: -1px;
    padding: 10px 7px 5px;
text-align:center;
width:500px;
float:right;

}

.DivWithScroll{
    height:350px;
    overflow:scroll;
    overflow-x:hidden;
}
#abc
{
 display:inline-block;
    margin:5px 20px;
    padding:5px;
}
div, img {
  margin: 0;
}

div {
  padding: 0;
}
label{
  margin:10px;
}

</style>
</head>
<body>
<div class="DivToScroll">
<div class="DivWithScroll">



<div style="float:left;">
BORDER
</div>
<br/>
<div class="form-field" style="float:left;">
<label><input type="radio">NO</label>
<label><input type="radio">YES</label>

</div>
<br/>
<hr>
<div style="float:left;">
PIPING
</div>
<div style="float:left;">
<img src="question.png"/></div><br/>
<div class="form-field" style="float:left;">
<label><input type="radio">NO</label>
<label><input type="radio">COLOR</label>

</div>
<br/>
<hr>
<table border="0">
<center>
<tr>
<td><img src="image.jpg" height="75" width="110"></td>
<td><img src="image.jpg" height="75" width="110"></td>
<td><img src="image.jpg" height="75" width="110"></td>
</tr>

<tr>
<td>caption1</td>
<td>caption2</td>
<td>caption3</td>
</tr>
</center>
</table>
<hr>
<div style="float:left;">
BLOUSE PADS
</div>
<div style="float:left;">
<img src="question.png"/></div><br/>
<div class="form-field" style="float:left;">
<label><input type="radio">NO</label>
<label><input type="radio">YES</label>

</div>
<br/>
<hr>
<div style="float:left;">
ADDITIONAL REQUESTS
</div>
<div style="float:left;">
<img src="question.png"/></div><br/>
<textarea name="ctl00$ContentPlaceHolder1$SpecialRequest" rows="3" cols="25" style="float:left" id="ContentPlaceHolder1_SpecialRequest" placeholder="For Example: Please make my blouse comfort fit, i.e 1/2" loose on either side all through. "></textarea>

<div style="visbility:hidden" >




    </div>


<div id="appscrolldown" style="clear:both;text-align:center;"> <img style="width:120px;cursor:pointer" id="ScrollDown" src="ScrollDownArrow.png"></div>
</div>

</div>

</body>

third page

<html>

<head>

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">

<link rel=\"stylesheet\" href=\"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css\">

<script src=\"http://code.jquery.com/jquery-1.11.3.min.js\"></script>

<script src=\"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js\"></script>

<script type=\"text/javascript\" src=\"MooTools-Core-1.5.2.js\"></script>

<style type=\"text/css\">

.DivToScroll{

background-color: #F5F5F5;

border: 1px solid #DDDDDD;

border-radius: 4px 0 4px 0;

color: #3B3C3E;

font-size: 12px;

font-weight: bold;

left: -1px;

padding: 10px 7px 5px;

width:500px;

height:400px;

}

.DivWithScroll{

height:400px;

overflow:scroll;

overflow-x:hidden;

width:500px;

}

#div1

{

\t\theight: 40px;

\t\twidth:472px;

\t\tborder: 1px solid black;

\t\tbackground: orange;

\t

}

.my_dropdown {

width:50px;

}

div.dropdown_container {

width:100px;

}

#table1 {

border: dashed 1px black;

width:460px;

}

</style>

</head>

<body>

third page
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="MooTools-Core-1.5.2.js"></script>
<style type="text/css">
.DivToScroll{
background-color: #F5F5F5;
border: 1px solid #DDDDDD;
border-radius: 4px 0 4px 0;
color: #3B3C3E;
font-size: 12px;
font-weight: bold;
left: -1px;
padding: 10px 7px 5px;
width:500px;
height:400px;
}

.DivWithScroll{
height:400px;
overflow:scroll;
overflow-x:hidden;
width:500px;
}
#div1
{

height: 40px;
width:472px;
border: 1px solid black;
background: orange;

}
.my_dropdown {
width:50px;
}
div.dropdown_container {
width:100px;
}
#table1 {
border: dashed 1px black;
width:460px;
}
</style>
</head>
<body>

Body

Close<img src=\"image.jpg\" style=\"width:800px;height:400px;\" alt=\"Skaret View\">

Close<img src="image.jpg" style="width:800px;height:400px;" alt="Skaret View">

<label for=\"\" style=\"width:55px\">filter By:</label>

<label for="" style="width:55px">filter By:</label>

<select class=\"my_dropdown\">

<option value=\"volvo\">Volvo</option>

<option value=\"saab\">Saab</option>

<option value=\"opel\">Opel</option>

<option value=\"audi\">Audi</option>

</select>

<select class="my_dropdown">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

<select class=\"my_dropdown\">

<option value=\"volvo\">Volvo</option>

<option value=\"saab\">Saab</option>

<option value=\"opel\">Opel</option>

<option value=\"audi\">Audi</option>

</select>

<select class="my_dropdown">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

<select class=\"my_dropdown\">

<option value=\"volvo\">Volvo</option>

<option value=\"saab\">Saab</option>

<option value=\"opel\">Opel</option>

<option value=\"audi\">Audi</option>

</select>

<select class="my_dropdown">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

caption1

caption2

caption3

caption1

caption2

caption3

caption1

caption2

caption3

< tbody>

caption1

caption2

caption3

caption1

caption2

caption3

caption1

caption2

caption3

caption1

caption2

caption3

caption1

caption2

caption3

caption1

caption2

caption3

caption1

caption2

caption3

caption1

caption2

caption3

caption1

caption2

caption3

</body>

</html>

</body>
</html>

推荐答案

ContentPlaceHolder1

SpecialRequest\" rows=\"3\" cols=\"25\" style=\"float:left\" id=\"ContentPlaceHolder1_SpecialRequest\" placeholder=\"For Example: Please make my blouse comfort fit, i.e 1/2\" loose on either side all through. \"></textarea>

<div style=\"visbility:hidden\" >

</div>

<div id=\"appscrolldown\" style=\"clear:both;text-align:center;\"> <img style=\"width:120px;cursor:pointer\" id=\"ScrollDown\" src=\"ScrollDownArrow.png\"></div>
</div>

</div>

</body>

SpecialRequest" rows="3" cols="25" style="float:left" id="ContentPlaceHolder1_SpecialRequest" placeholder="For Example: Please make my blouse comfort fit, i.e 1/2" loose on either side all through. "></textarea> <div style="visbility:hidden" > </div> <div id="appscrolldown" style="clear:both;text-align:center;"> <img style="width:120px;cursor:pointer" id="ScrollDown" src="ScrollDownArrow.png"></div> </div> </div> </body>

third page

<html>

<head>

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">

<link rel=\"stylesheet\" href=\"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css\">

<script src=\"http://code.jquery.com/jquery-1.11.3.min.js\"></script>

<script src=\"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js\"></script>

<script type=\"text/javascript\" src=\"MooTools-Core-1.5.2.js\"></script>

<style type=\"text/css\">

.DivToScroll{

background-color: #F5F5F5;

border: 1px solid #DDDDDD;

border-radius: 4px 0 4px 0;

color: #3B3C3E;

font-size: 12px ;

font-weight: bold;

left: -1px;

padding: 10px 7px 5px;

width:500px;

height:400px;

}

.DivWithScroll{

height:400px;

overflow:scroll;

overflow-x:hidden;

width:500px;

}

#div1

{

\t\theight: 40px;

\t\twidth:472px;

\t\tborder: 1px solid black;

\t\tbackground: orange;

\t

}

.my_dropdown {

width:50px;

}

div.dropdown_container {

width:100px;

}

#table1 {

border: dashed 1px black;

width:460px;

}

</style>

</head>

<body>

Body

Close<img src=\"image.jpg\" style=\"width:800px;height:400px;\" alt=\"Skaret View\">

Close<img src="image.jpg" style="width:800px;height:400px;" alt="Skaret View">

<label for=\"\" style=\"width:55px\">filter By:</label>

<label for="" style="width:55px">filter By:</label>

<select class=\"my_dropdown\">

<option value=\"volvo\">Volvo</option>

<option value=\"saab\">Saab</option>

<option value=\"opel\">Opel</option>

<option value=\"audi\">Audi</option>

</select>

<select class="my_dropdown">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

<select class=\"my_dropdown\">

<option value=\"volvo\">Volvo</option>

<option value=\"saab\">Saab</option>

<option value=\"opel\">Opel</option>

<option value=\"audi\">Audi</option>

</select>

<select class="my_dropdown">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

<select class=\"my_dropdown\">

<option value=\"volvo\">Volvo</option>

<option value=\"saab\">Saab</option>

<option value=\"opel\">Opel</option>

<option value=\"audi\">Audi</option>

</select>

<select class="my_dropdown">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

caption1

caption2

caption3

caption1

caption2

caption3

caption1

caption2

caption3

< tbody>

caption1

caption2

caption3

caption1

caption2

caption3

caption1

caption2

caption3

caption1

caption2

caption3

caption1

caption2

caption3

caption1

caption2

caption3

caption1

caption2

caption3

caption1

caption2

caption3

caption1

caption2

caption3

</body>

</html>

</body>
</html>

Just checkout this link http://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp

这篇关于如何在Tab中保留三个Html页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何在Tab中保留三个Html页面 [英] How Do I Keep Three Html Pages In Tab

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录关闭

如何在Tab中保留三个Html页面 [英] How Do I Keep Three Html Pages In Tab

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录 关闭

登录关闭