douna2917 2012-08-03 19:39
浏览 60

通过向URL添加代码来显示特定的div

I have this code as an example:

<html>
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}
</script>

</head>

<body>

             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>


             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>

             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>

</body>
</html>

On a different page, I want to have a link that will show Div #2 when the user loads the page by clicking that external link. I would presume that such thing would be possible by some type of adjustment to the URL? For instance: domain.com/page.php?=showdiv2

Any assistance is appreciate, my knowledge of coding is limited (especially with PHP) so please be detailed if you choose to help.

  • 写回答

5条回答 默认 最新

  • dpus81500574 2012-08-03 19:42
    关注

    There are a number of ways to accomplish what you want to do here. I will explain how you can do it with $_GET.

    You can control this with a $_GET variable (at the end of the URL, just add ?varName=value where varName is the name of a variable (this is arbitrary), and value is the value you want to assign it.

    Then in your PHP code you can access this variable by a) checking if it exists and b) performing logic based on its value:

    <?php
    $divToShow = isset($_GET['div']) ? $_GET['div'] : "";

    //logic here
?>

    So for example, if you want <div id="div_2"> to be displayed, you could plug this in to jQuery by writing:

    <script language="javascript" type="text/javascript">
    $("div#div_<?= $divToShow ?>").show();
    $("div:not(#div_<?= $divToShow ?>)").hide();
</script>

    OR you could simply force PHP to only print out div # 2:

    <?php
// set $divId to a value

if ($divId == $divToShow) : ?>
    <div id="<?= $divId ?>">
        <!-- content here -->
    </div>
<?php endif; ?>
    评论

报告相同问题？

  • jquery 拖拽动态添加div 保存拖拽后的效果
    2019-05-29 01:12
    本篇文章将聚焦于一个特定的应用场景：使用jQuery实现拖拽功能来动态添加div，并保存拖拽后的位置效果。这个功能在网页布局、可配置界面或者拖放式应用设计中非常常见。 首先，我们需要理解jQuery UI中的Draggable...
  • ajax控制div窗口显示和隐藏
    2012-12-11 02:00
    例如，用户触发一个操作（如点击按钮），通过Ajax发送请求到服务器，服务器处理后返回结果，前端根据结果更新div的状态。这在无需刷新页面的情况下提供了丰富的用户体验，比如实时聊天、动态加载内容等场景。 五、...
  • vue 前端通过URL链接下载图片pnf等
    2021-12-25 10:32
    ㅤ零到一的博客 vue 前端通过URL链接下载图片pnf等 提示：如果后端返回的链接是可以通过以下方法直接下载的可跳过本章节 window.open(url, ‘_blank’) //外部窗口打开下载 提示：解释一下如果上诉方法是在浏览器打开预览，无法...
  • web前端代码大全_Web前端开发代码规范（基础）
    2020-12-06 04:50
    weixin_39528525的博客 一、 引言 对于一个多人团队来说，制定一个统一的规范是必要的，因为个性化的东西无法产生良好的聚合效果，规范化可以提高编码工作效率，使代码保持统一的风格，以便于代码整合和后期维护。二、 HTML/CSS规范2.1 ...
  • web前端代码指南(vue3)
    2024-04-23 18:08
    化作繁星的博客 1. 命名规范 2. 代码规范 3. 代码注释 4. 编写习惯 5. git提交
  • 基于JavaScript实现全屏透明遮罩div层锁屏效果
    2020-10-22 22:25
    在前端开发中，为了给用户提供更加友好和交互性更强的网页体验，开发者经常会使用各种JavaScript技术来实现页面的特定效果。实现全屏透明遮罩div层锁屏效果是一个常见的需求，它允许开发者在某些操作（如模态对话框...
  • 【图书管理系统】详细讲解用户登录：后端代码实现及讲解、前端代码讲解
    2025-05-04 17:27
    Code哈哈笑的博客 本文详细讲解了用户登录功能的前后端...前端使用Bootstrap构建响应式登录页面，通过jQuery发起AJAX POST请求，处理返回的布尔值实现页面跳转或错误提示。文中涵盖接口设计、@RestController注解原理、参数校验密码判断
  • 前端实现网页内容（如某div）变成图片
    2021-08-18 16:15
    陆江河的博客 相关技术 html2canvas 实现方式 下载地址： html2canvas 引入html2canvas <script src="static/js/html2canvas.js"></script>...代码： ... // 通过class获取的多个div,此处把多个div生成多个图片
  • 基于vue3实现的聊天机器人前端（附代码）
    2024-11-08 17:54
    旧故新长的博客 // 添加到聊天记录显示区 // 滚动到底部，确保最新消息可见 chatbox.value.scrollTop = chatbox.value.scrollHeight; // 发送消息到服务器 connectWebSocket(messageText); } }; if (!receiving.value && message....
  • html div标签属性教程,前端基础之DIV标签讲解！
    2021-06-13 02:27
    清凉雪碧的博客 摘要：DIV标签，称为区隔标记。作用是设定字、画、表格等的摆放位置。当你把文字、图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作...
  • 没有解决我的问题, 去提问