简体   繁体   English

将菜单div加载到不在新选项卡中的Content div中

[英]load menu div into the Content div not in new tab

I am trying to update an old frames site. 我正在尝试更新旧框架网站。 Header/Menu/Content format. 标题/菜单/内容格式。 I am just starting to learn about divs. 我才刚刚开始学习div。 I have created 3 divs Header/Menu/Content. 我创建了3个divs标题/菜单/内容。 Looks great. 看起来很棒。 I want to click an item in the Menu div, and load it into the Content div... Here's my attempt 我想单击“菜单” div中的一个项目,然后将其加载到“内容” div中...这是我的尝试

<body>
    <div id="header">HEADER TEXT</div>
    <div id="menu">LINKS
        <ul>
            <li><a href="link1.htm" target="content"> Link 1 </a>
            </li>
            <li><a href="link2.htm" target="content"> Link 2 </a>
            </li>
            <li><a href="link3.htm" target="content"> Link 3 </a>
            </li>
        </ul>
    </div>
    <div id="content">CONTENT</div>
</body>

The links open in a new tab. 链接在新选项卡中打开。 What am I missing? 我想念什么? I have been researching and found reference to iframe. 我一直在研究并发现对iframe的参考。 Is this what's needed? 这是需要什么吗?

now i have solved that.. using This Link but in that case i am not able to give the book mark.. how can i overcame this problem? 现在我已经解决了..使用此链接,但是在那种情况下我无法给该书签..我该如何克服这个问题? Thanks in advance.. 提前致谢..

You cannot change div's content without javascript. 没有javascript,您无法更改div的内容。 You might want to use jQuery - put the following script in the <head> tag: 您可能要使用jQuery-将以下脚本放在<head>标记中:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#menu a").click(function (e) {
            var $this = $(this);

            $("#" + $this.attr("target")).load($this.attr("href"));

            e.preventDefault();// to make browser not follow the link
        });
    });
</script>

You can do this using a php switch function but you have to have the switch inside of the target div and the links outside of that div (in that case it is a matter of positioning you links and the div properly. 您可以使用php开关功能执行此操作,但是必须将开关置于目标div内,并将链接置于该div之外(在这种情况下,这是将链接和div正确放置的问题。

You can also do it using $_GET and $_POST together (with a switch again is preferable IMO) It's a complicated thing to elaborate on here. 您也可以同时使用$ _GET和$ _POST来完成此操作(最好再使用IMO开关)这是一件很复杂的事情。

But and here's the thing sometimes it is something you can benefit from: such as if you are dealing with a whole host of templates/themes and those themes have in them jscript as versions of ajax and the like; 但是有时候这是一件您可以从中受益的事情:例如,如果您要处理大量模板/主题,而这些主题中包含的jscript是ajax等版本; these will conflict if you use different versions on the same webpage. 如果您在同一网页上使用不同的版本,则这些冲突。 So if you go to use your version of ajax to do the job and the template does not use the same version (which is very likely to happen) then using ajax or jquery will not work. 因此,如果您打算使用自己的ajax版本执行该工作,并且模板未使用同一版本(这很可能会发生),那么使用ajax或jquery将不起作用。 If that is the case then you will have problems using ajax or jquery to do the job for you (there are various versions being used now and you cannot use 2 different versions on the same webpage in my experience. 如果是这种情况,那么在使用ajax或jquery来完成任务时会遇到问题(根据我的经验,现在正在使用各种版本,并且您不能在同一网页上使用2个不同的版本。

Use ajax, jquery javascript is the better way because php is a server side scripting language and javascript (ajax, jquery) are client side scripting languages and are used to interact with the server from the client page: if this is done right then the server replies directly and that reply is caught by the javascript function parsed onto the same page at that instant during run-time that is stipulated in the script. 使用ajax,jquery javascript是更好的方法,因为php是服务器端脚本语言,而javascript(ajax,jquery)是客户端脚本语言,可用于从客户端页面与服务器交互:如果正确完成,则服务器直接答复,并且该答复被脚本中规定的运行时在该瞬间解析到同一页面上的javascript函数捕获。 If you want to learn about using $_POST and $_GET (they are predifined php functions, and can be used together) then do some research using google searches will do the trick. 如果您想了解使用$ _POST和$ _GET(它们是预定义的php函数,可以一起使用),则可以使用Google搜索进行一些研究。 And also do some research on PHP switch functions. 并对PHP开关功能进行一些研究。

this link uses $_GET and $_POST in a switch its a great inllustration: http://www.intechgrity.com/using-php-get-and-post-simultaneously-via-single-html-form/# 此链接在开关中使用$ _GET和$ _POST是一个很好的例证: http : //www.intechgrity.com/using-php-get-and-post-simultaneously-via-single-html-form/#

I hope this helps you G 希望对您有帮助

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM