我正在尝试将我的联系人代码放在联系人选项卡中，但我不知道确切的位置。它一直想去标签栏的位置。我不希望它在那里。我希望它在页面中间点击栏时。
我尝试了很多不同的地方，但它似乎不适合我。我把它放在代码中。所以运行它，看看发生了什么。
感谢谁帮助过我！
以下是我要添加到主页的代码：
<style>
div {
text-align: center;
}
</style>
<div>
<h1>{PEBKAC}</h1>
<p>____________________________________________________________________</p>
<h2>Customer Support:</h2>
<p>Thank you for using {PEBKAC}! Please complete the form below. <br> This
is the
fastest and easiest way to get in touch with us.</p>
<p><b>U.S.</b></p>
<p><b> Monday-Friday 11:30 AM - 11:45 PM CST <br>
Saturday-Sunday 1:50 PM - 11:45 PM CST</b></p>
<p><b>Contact by E-mail only.</b></p>
<style>
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: grey;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: white;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>
<body>
<form action="mailto:the email that I choose" method="post"
enctype="text/plain">
<div class="container">
<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Your
Username..">
<label for="E-mail">E-mail:</label>
<input type="text" id="E-mail" name="E-mail" placeholder="Your E-mail..">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write Something.."
style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
包含所有标签的主页：
<html lang="en">
<head>
<title>{PEBKAC} - HomePage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.w3-bar-item{
margin-top: 36px;
margin-bottom: 36px;
}
</style>
<body style="background-color:white;">
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card-2"
style="width:130px">
<button class="w3-bar-item w3-button tablink" onclick="openTab(event,
'Home')">Home</button>
<button class="w3-bar-item w3-button tablink" onclick="openTab(event,
'Questions')">Questions</button>
<button class="w3-bar-item w3-button tablink" onclick="openTab(event,
'Search')">Search</button>
<button class="w3-bar-item w3-button tablink" onclick="openTab(event,
'Users')">Users</button>
<button class="w3-bar-item w3-button tablink" onclick="openTab(event,
'About')">About</button>
<button class="w3-bar-item w3-button tablink" onclick="openTab(event,
'Profile')">Profile</button>
<button class="w3-bar-item w3-button tablink" onclick="openTab(event,
'Settings')">Settings</button>
<button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Log
Out')">Log Out</button>
<button class="w3-bar-item w3-button tablink" onclick="openTab(event,
'Terms')">Terms</button>
<button class="w3-bar-item w3-button tablink" onclick="openTab(event,
'Privacy Policy')">Privacy Policy</button>
<button class="w3-bar-item w3-button tablink" onclick="openTab(event,
'Contact Us')">Contact Us</button>
<button class="w3-bar-item w3-button tablink" onclick="openTab(event,
'Feedback')">Feedback</button>
</div>
<div style="margin-left:130px">
<div id="Home" class="w3-container tab" style="display:none">
</div>
<div id="Questions" class="w3-container tab" style="display:none">
</div>
<div id="Search" class="w3-container tab" style="display:none">
</div>
<div id="Users" class="w3-container tab" style="display:none">
</div>
<div id="About" class="w3-container tab" style="display:none">
</div>
<div id="Profile" class="w3-container tab" style="display:none">
</div>
<div id="Settings" class="w3-container tab" style="display:none">
</div>
<div id="Log Out" class="w3-container tab" style="display:none">
</div>
<div id="Terms" class="w3-container tab" style="display:none">
</div>
<div id="Privacy Policy" class="w3-container tab" style="display:none:>
</div>
<div id="Contact Us" class="w3-container tab" style="display:none:>
</div>
<div id="Feedback" class="w3-container tab" style="display:none:>
</div>
</div>
</body>
</head>
</html>
答案 0 :(得分：2)
如果您想使用我创建的JQuery函数，请将其包含在head标记中。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#Home").css("display", "block");
});
function openTab(evnt, id){
$(".tab").each(function(){ $
(this).css("display", "none");
})
$("#"+id).css("display", "block");
}
</script>
id选择器中不能有空格。
<强>之前：
<div id="Privacy Policy" class="w3-container tab" style="display:none;">
<强>后：
<div id="PrivacyPolicy" class="w3-container tab" style="display:none;">
同样在按钮中也找到了。
<强>之前：
<button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Log Out')">Log Out</button>
<强>后：
<button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'LogOut')">Log Out</button>
此外，我发现div的内联样式未正确关闭
<强>之前：
<div id="Privacy Policy" class="w3-container tab" style="display:none:>
<强>后：
<div id="PrivacyPolicy" class="w3-container tab" style="display:none;">
请参考下面的工作小提琴，并使用相同的内容！