尝试使用jQuery在单击时显示div内容

koaltpgm 于 2023-08-04 发布在 jQuery

关注(0)|答案(2)|浏览(98)

在使用jQuery单击链接时无法显示内容。现在所有的CSS和代码都在里面。我只是想它只是弹出一旦你点击“安东尼奥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>tono.nogueras@gmail.com</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;

}

字符串

jquery

来源：https://stackoverflow.com/questions/22491563/trying-to-get-div-content-to-show-upon-clicking-with-jquery

2条答案

按热度按时间

w51jfk4q1#

应该是这样的

$(document).ready(function() {
   $('#about a').on('click', function(e) {
        e.preventDefault();
        $('.aboutcontent').show();
   });
});

字符串
请注意，你的HTML是 * 真的 * 无效，缺少关闭元素几乎无处不在。

赞(0）回复(0）举报 2023-08-04

vcirk6k62#

您的jQuery代码似乎存在一个小问题，即在单击“Antonio Nogueras”链接时无法显示内容。让我们修复它：
通过为script元素添加结束标记，确保正确包含jQuery库：

<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中为“DIGITAL MARKETING”添加一个关闭锚点标记，以修复结构：

<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”相关联的内容。请记住根据您的设计偏好设置弹出窗口的内容和外观。
注意：在HTML文档的head部分包含CSS样式也是一个很好的做法。

赞(0）回复(0）举报 2023-08-04

我来回答

尝试使用jQuery在单击时显示div内容

2条答案

相关问题

热门标签

最新问答