我有以下代码，我希望在同一个Div中显示不同的页面......那么我该怎么做呢。 [英] I Have Following Code In That I Want To Display Differant Page In Same Div... So How Can I Do That.
本文介绍了我有以下代码，我希望在同一个Div中显示不同的页面......那么我该怎么做呢。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好朋友，
这里我有5页，我有Anchor标签。当我点击第一个链接时，它在名为#content的div中打开。我试过但我失败了。分享您的意见。
这是我的代码。
HTML文件
Hello Friends,
Here I have 5 pages, I have Anchor tag. when i click on first link it open in div named #content. i tried but i failed. so share your opinion.
Here is My Code.
HTML File
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="App_Themes/test.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function () {
$('#sect1').click(function () {
});
});
</script>
</head>
<body>
<div class="header">
<ul class="ul-menu">
<li class="li-menu"><a href="SECTION1.html" id="sect1" onclick="check()">Section 1</a></li>
<li class="li-menu"><a href="SECTION2.html" id="sect2" target="_parent">Section 2</a></li>
<li class="li-menu"><a href="SECTION3.html" id="sect3">Section 3</a></li>
<li class="li-menu"><a href="SECTION4.html" id="sect4">Section 4</a></li>
<li class="li-menu"><a href="SECTION5.html" id="sect5">Section 5</a></li>
<li class="li-menu"><a href="validateform.html" id="sect6">Section 6</a></li>
</ul>
</div>
<div id="content" name="con">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="footer">
</div>
CSS文件。
CSS File.
body {
}
* {
margin:0px;
padding:0px;
}
.header {
height:70px;
width:100%;
background-color:brown;
}
.left {
float:left;
height:500px;
width:10%;
background-color:burlywood;
}
.right {
float:right;
height:500px;
width:10%;
background-color:burlywood;
}
.footer {
height:70px;
width:100%;
clear:both;
background-color:brown;
}
.ul-menu
{
list-style-type:none;
}
.li-menu,a {
float:left;
text-decoration:none;
font-size:large;
margin-top:10px;
margin-left:10px;
padding-left:10px;
color:yellow;
}
.li-menu, a:hover {
text-decoration:underline;
}
SECTION 1.html
SECTION 1.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
// alert(checkbox);
// if (confirm("Are U Sure Want To Delete") == true)
// {
// var i = r.parentNode.parentNode.rowIndex;
// document.getElementById("tbl").deleteRow(i);
// }
// else { alert("Ok"); }
//}
function addrow(row) {
var name = prompt("Enter Name ");
var table = document.getElementById("tbl");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "<input type='checkbox' name='foo'/>";
cell2.innerHTML = name;
cell3.innerHTML = "<input type='button' value='delete' onclick='delRow(this)' >";
}
//function selectall(source) {
// var checkboxes = document.getElementsByName("foo");
// for (var i = 0, n = checkboxes.length; i < n; i++) {
// if (checkboxes[i].type == 'checkbox')
// {
// checkboxes[i].checked = true;
// }
// else {
// checkboxes[i].checked = false;
// }
// }
//}
function deleteall(source) {
var checkboxes = document.getElementsByName("foo");
for (var i = 0, n = checkboxes.length; i < n; i++)
{
if (checkboxes[i].type == 'checkbox')
{
checkboxes[i].checked = true;
}
}
if (checkboxes[i].checked == true)
{
// alert("You select all");
var ans = confirm("Are U Sure Delete Whole Record");
if (ans == true)
{
var i = source.parentNode.parentNode.rowIndex;
document.getElementById("tbl").deleteRow(i);
}
else
{
alert("Sorry Tray Again!....");
}
}
}
function delRow(r) {
if (confirm("Are U Sure Want To Delete") == true)
{
var checkbox = document.getElementById("ch");
if (checkbox.type == 'checkbox')
{
if (checkbox.checked == true)
{
alert("Ok");
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("tbl").deleteRow(i);
}
else
{
alert("Sorry");
}
}
}
}
</script>
</head>
<body>
<center> <INPUT type="button" value="Add Row" onclick="addrow('tbl')" /></center>
<br />
<table border="1" align="center" id="tbl">
<tr>
<th><input type="checkbox" onclick="return deleteall(this)" /></th>
<th>Name</th>
<th>Action</th>
</tr>
<tr>
<td><input type="checkbox" align="center" id="ch" name="foo" /></td>
<td>viral</td>
<td><input type="button" id="del" value="delete" onclick="delRow(this)" /></td>
</tr>
<tr>
<td><input type="checkbox" align="center" id="ch" name="foo" /></td>
<td>vivek</td>
<td><input type="button" id="del" value="delete" onclick="delRow(this)" /></td>
</tr>
<tr>
<td><input type="checkbox" align="center" id="ch" name="foo" /></td>
<td>ram</td>
<td><input type="button" id="del" value="delete" onclick="delRow(this)" /></td>
</tr>
</table>
</body>
</html>
Thank You :)
Thank You :)
推荐答案
(function () {
('#sect1').click(function () {
});
}）;
</script>
</head>
<body>
<div class=\"header\">
<ul class=\"ul-menu\"&g t;
<li class=\"li-menu\"><a href=\"SECTION1.html\" id=\"sect1\" onclick=\"check()\">Section 1</a></li>
<li class=\"li-menu\"><a href=\"SECTION2.html\" id=\"sect2\" target=\"_parent\">Section 2</a></li>
<li class=\"li-menu\"><a href=\"SECTION3.html\" id=\"sect3\">Section 3</a></li>
<li class=\"li-menu\"><a href=\"SECTION4.html\" id=\"sect4\">Section 4</a></li>
<li class=\"li-menu\"><a href=\"SECTION5.html\" id=\"sect5\">Section 5</a></li>
<li class=\"li-menu\"><a href=\"validateform.html\" id=\"sect6\">Section 6</a ></li>
</ul>
</div>
<div id=\"content\" name=\"con\">
<div class=\"left\">
</div>
<div class=\"right\">
</div>
</div>
<div cl ass=\"footer\">
</div>
('#sect1').click(function () { }); }); </script> </head> <body> <div class="header"> <ul class="ul-menu"> <li class="li-menu"><a href="SECTION1.html" id="sect1" onclick="check()">Section 1</a></li> <li class="li-menu"><a href="SECTION2.html" id="sect2" target="_parent">Section 2</a></li> <li class="li-menu"><a href="SECTION3.html" id="sect3">Section 3</a></li> <li class="li-menu"><a href="SECTION4.html" id="sect4">Section 4</a></li> <li class="li-menu"><a href="SECTION5.html" id="sect5">Section 5</a></li> <li class="li-menu"><a href="validateform.html" id="sect6">Section 6</a></li> </ul> </div> <div id="content" name="con"> <div class="left"> </div> <div class="right"> </div> </div> <div class="footer"> </div>
CSS File.
CSS File.
body {
}
* {
margin:0px;
padding:0px;
}
.header {
height:70px;
width:100%;
background-color:brown;
}
.left {
float:left;
height:500px;
width:10%;
background-color:burlywood;
}
.right {
float:right;
height:500px;
width:10%;
background-color:burlywood;
}
.footer {
height:70px;
width:100%;
clear:both;
background-color:brown;
}
.ul-menu
{
list-style-type:none;
}
.li-menu,a {
float:left;
text-decoration:none;
font-size:large;
margin-top:10px;
margin-left:10px;
padding-left:10px;
color:yellow;
}
.li-menu, a:hover {
text-decoration:underline;
}
SECTION 1.html
SECTION 1.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
// alert(checkbox);
// if (confirm("Are U Sure Want To Delete") == true)
// {
// var i = r.parentNode.parentNode.rowIndex;
// document.getElementById("tbl").deleteRow(i);
// }
// else { alert("Ok"); }
//}
function addrow(row) {
var name = prompt("Enter Name ");
var table = document.getElementById("tbl");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "<input type='checkbox' name='foo'/>";
cell2.innerHTML = name;
cell3.innerHTML = "<input type='button' value='delete' onclick='delRow(this)' >";
}
//function selectall(source) {
// var checkboxes = document.getElementsByName("foo");
// for (var i = 0, n = checkboxes.length; i < n; i++) {
// if (checkboxes[i].type == 'checkbox')
// {
// checkboxes[i].checked = true;
// }
// else {
// checkboxes[i].checked = false;
// }
// }
//}
function deleteall(source) {
var checkboxes = document.getElementsByName("foo");
for (var i = 0, n = checkboxes.length; i < n; i++)
{
if (checkboxes[i].type == 'checkbox')
{
checkboxes[i].checked = true;
}
}
if (checkboxes[i].checked == true)
{
// alert("You select all");
var ans = confirm("Are U Sure Delete Whole Record");
if (ans == true)
{
var i = source.parentNode.parentNode.rowIndex;
document.getElementById("tbl").deleteRow(i);
}
else
{
alert("Sorry Tray Again!....");
}
}
}
function delRow(r) {
if (confirm("Are U Sure Want To Delete") == true)
{
var checkbox = document.getElementById("ch");
if (checkbox.type == 'checkbox')
{
if (checkbox.checked == true)
{
alert("Ok");
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("tbl").deleteRow(i);
}
else
{
alert("Sorry");
}
}
}
}
</script>
</head>
<body>
<center> <INPUT type="button" value="Add Row" onclick="addrow('tbl')" /></center>
<br />
<table border="1" align="center" id="tbl">
<tr>
<th><input type="checkbox" onclick="return deleteall(this)" /></th>
<th>Name</th>
<th>Action</th>
</tr>
<tr>
<td><input type="checkbox" align="center" id="ch" name="foo" /></td>
<td>viral</td>
<td><input type="button" id="del" value="delete" onclick="delRow(this)" /></td>
</tr>
<tr>
<td><input type="checkbox" align="center" id="ch" name="foo" /></td>
<td>vivek</td>
<td><input type="button" id="del" value="delete" onclick="delRow(this)" /></td>
</tr>
<tr>
<td><input type="checkbox" align="center" id="ch" name="foo" /></td>
<td>ram</td>
<td><input type="button" id="del" value="delete" onclick="delRow(this)" /></td>
</tr>
</table>
</body>
</html>
Thank You :)
Thank You :)
Read out this: http://api.jquery.com/load/[^]
You need to run it in a web server for the Ajax to work.
Read out this: http://api.jquery.com/load/[^]
You need to run it in a web server for the Ajax to work.
这篇关于我有以下代码，我希望在同一个Div中显示不同的页面......那么我该怎么做呢。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
