Question

我的网页上有四个标签（主页，联系人，等等）。每个链接到不同的页面。相反，我需要使用相同的页面并单独更新正文部分。例如：点击联系人时，它应该加载一个包含正文中联系信息的表。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body bgcolor=white ID=body>
<header class=head>
<img src="C:\Users\HP\Desktop\HTML web\ProfilePhoto.jpg" style="border-
radius: 50%;margin-left:5px;margin-top:4px;padding: 0px 0px;"><h1 
align=right style="float:right;padding: -1px 
2px">GowthamSarathy<br>works</h1>
</header>
<nav class=navv>
<a href="#">Home</a> | <a href=#>Portfolio</a> | <a 
href="C:\Users\HP\Desktop\HTML web\conta us.html">Contact us</a> | <a 
href="/jquery/" style="margin-right:5px;">Updates</a>
</nav>
<p>Lorem Ipsum dolor set amet....</p>
</body></html>

请帮助我，因为我是网页设计的新手并且有兴趣了解更多信息。

Answer 1

您的问题非常广泛，并且会得到很多不同的答案。但是你会通过这种思路快速进入Javascript领域。

以下是来自W3school

的标签内容的热门示例

它大量使用了css中的“display property”。其他替代方案是使用id设置div的实际内容，其示例可以在此答案的底部找到。

W3School标签示例

 $ git clone https://github.com/linnovate/mean.git
 $ cd mean
 $ npm install && npm start

Binary has a problem: Error: %1 is not a valid Win32 application.
\\?\D:\mean\node_modules\node-sass\vendor\win32-ia32-57\binding.node
erb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (D:\mean\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (D:\mean\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (D:\mean\node_modules\which\which.js:80:29)
gyp verb `which` failed     at D:\mean\node_modules\which\which.js:89:16
gyp verb `which` failed     at D:\mean\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at D:\mean\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:152:21)
gyp verb `which` failed  python2 { Error: not found: python2

function openCity(evt, cityName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

替换div中的内容

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

<!-- Tab links -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<!-- Tab content -->
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

使用LINKS更新页面内容

1 个答案: