使用 jQuery 单击链接时无法显示内容。现在所有的 CSS 和代码都在那里。我只是希望当你点击“Antonio Nogueras”时它就会弹出。 CSS 位于底部。让我知道我能做什么。
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Scada' rel='stylesheet' type='text/css'>
<link href='stylesheet.css' rel='stylesheet' type='text/css'>
<title>Glotacosm - Digital Production - SEO/PPC/SOCIAL/COPYWRITING/DESIGN/WEBDESIGN</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript">
document.ready(function()
{
$('div#about').click(function() {
$('div#aboutcontent').show();
});
});
</script>
<body>
<h1>GLOTACOSM -SEO/PPC/SOCIAL/COPYWRITING/DESIGN/WEBDESIGN </h1>
<div class="wrapper">
<div id="MainMenu">
<div id="about">
<a class="change" target="_blank" >ANTONIO NOGUERAS</a></br>
</div>
<a class="change" target="_blank" id="digitalmarketing" >DIGITAL MARKETING</br>
<a class="change" target="_blank" >SOCIAL MEDIA MGMT</br>
<a class="change" target="_blank">FORMS + FUNCTIONS</br>
<a class="change" target="_blank">A WAY WITH WORDS</br>
<a class="change" target="_blank">WEB DEVELOPMENT</br>
<a class="change" target="_blank">GENERAL MUSINGS</br>
</div>
<div class="aboutcontent">
<div class="profilepic">
<img src="http://square205.com/images/the-team/Antonio-photo1.jpg"></img>
<p>
Name: Antonio Nogueras</br>
Age: 24</br>
Stomping grounds: Denton, TX</br>
Height: Astronomical</p>
</div>
<div class="about">
<p id="p1about">
<p>To indtroduce myself, my name is Antonio Nogueras and I'm somewhat of a digital ventrlioquist - I make the pixels do the talking for me. I do a lot; you may have noticed. Let me be upfront so as to be clear: all of who I am does not come without the profficiency and efficiency of ideas. It is my honor to weild a world of language, code and color to bring digital clairvoyance to the electro-landscape of the 21st century.I have been writing almost all my life, and typos, like nagging gremlins, claw at my integrity each day, but what doesn't kill you surely makes you stronger. I have also been in tune with the underpinnings of the digital marketing landscape for some time now, </ br>
</br>
</br>
Now, where were we? Oh, that's right - I'd like to work for you, or you simply just peruse my expertise. Let's talk business or shop, or maybe we can talk about how to implementing a how to fine-tune your web shop for a more fluid buying cycle. Whatever you need, you can talk to me here (I promise I'm not as ecentric as this block of text lets on.).</br>
</br>
Contact: <strong>[email protected]</strong>
</p>
</div>
</div>
</div>
</body>
</html>
.about
{
position: absolute;
margin-left: 400px;
margin-top:100px;
display: block;
font-family: 'Scada', sans-serif;
font-size: 18px;
width: 425px;
}
.aboutcontent {
display: none;
}
它应该看起来像这样
$(document).ready(function() {
$('#about a').on('click', function(e) {
e.preventDefault();
$('.aboutcontent').show();
});
});
请注意，您的 HTML 真的无效，几乎到处都缺少结束元素。
您的 jQuery 代码似乎存在一个小问题，导致单击“Antonio Nogueras”链接时无法显示内容。让我们修复它：
确保通过为脚本元素添加结束标记来正确包含 jQuery 库ahrefs 替代方案:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
在 jQuery 代码中，将
document.ready(function() {...})$(document).ready(function() {...})<script type="text/javascript">
$(document).ready(function() {
$('div#about').click(function() {
$('div.aboutcontent').toggle();
});
});
</script>
在
MainMenu<div id="MainMenu">
<div id="about">
<a class="change" target="_blank">ANTONIO NOGUERAS</a><br>
</div>
<a class="change" target="_blank" id="digitalmarketing">DIGITAL MARKETING</a><br>
<!-- Rest of the menu options -->
</div>
通过这些更改，单击“ANTONIO NOGUERAS”现在应该显示与 div 类“aboutcontent”关联的内容。请记住根据您的设计偏好设置弹出窗口的内容和外观的样式。
注意：将 CSS 样式包含在 HTML 文档的 head 部分也是一个很好的做法。