Question

您好我想使用jquery创建HMTL标签，每个标签中都会加载特定的应用程序。例如，有两个选项卡。

单击时，第一个选项卡应该加载一个页面，该页面具有执行特定任务的两个或三个按钮，同样也适用于第二个选项卡。

enter code here

我使用

将页面加载到选项卡上

$("#DIV NAME").load($(this).attr("href"))

但我无法执行该页面，因为浏览器未重定向到该页面。因此我用了

window.history.pushState("string", "Title","$(this).attr("href)");

指向浏览器到该页面。

现在，当我执行我的页面时，只要我点击任何按钮，它就会转到我的页面而不会停留在该页面上的标签中。

如何让我的其他页面的按钮在当前页面的选项卡中执行任务？请告诉我。谢谢！

代码如下所示：

text-shadow: #eee 0px 0px 2px; }

/* :first-child pseudo selector with rounded top left corner */
#menu ul li:first-child a { -moz-border-radius-topleft: 12px; -webkit-border-top-left-radius:12px; }

/* :last-child pseudo selector with rounded top right corner */
#menu ul li:last-child a { -moz-border-radius-topright: 12px; -webkit-border-top-right-radius:12px; }

/* hover state shows a linear gradient and opacity it brought down to 0.9 and also shows a very slight grey shadow on top */
#menu ul li a:hover { -moz-box-shadow: 0 -5px 10px #777; -webkit-box-shadow: 0 -5px 10px #777;
   background: -webkit-gradient(
      linear, right bottom, left top, color-stop(0, rgb(237,227,112)), color-stop(0.72, rgb(255,173,10))) !important;
   background: -moz-linear-gradient(
      right bottom, rgb(237,227,112) 0%, rgb(255,173,10) 72%) !important;
   background-color:rgb(255,173,10) !important;
   -moz-opacity:.90; filter:alpha(opacity=90); opacity:.90; }

/* another RGBA background, now with an opacity of 0.8 */
#menu ul li a.active { background: rgba(255,138,30,0.8) !important; }



/* main contents with RGBA background (same colour as active tab) and three rounded corners */
#main { clear:both; background: rgba(255,138,30,0.8); width:1000px; margin-left:150px;
   -moz-border-radius-topright: 12px; -moz-border-radius-bottomright: 12px; -moz-border-radius-bottomleft: 12px;
   -webkit-border-top-right-radius:12px; -webkit-border-bottom-right-radius:12px; -webkit-border-bottom-left-radius:12px;}

/* header with a text-shadow */
#main h3 { text-transform:uppercase; padding:20px 0 0 20px; color:#eee; text-shadow: #000 0px 0px 2px; }

  </style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script>


google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{
        // Just for demonstration purposes, change the contents/active state using jQuery
        $("#menu ul li a").click(function(e) {
                e.preventDefault();

                $("#menu ul li a").each(function() {
                        $(this).removeClass("active");
                });

                $(this).addClass("active");


                $("#main").load($(this).attr("href"));
      //          window.history.pushState("string", "Title","$(this).attr("href")");
//              $(this).html($(this).attr("href"));
        });
});

</script>


</head>

<body  background="wood_bg.jpg" >

<div id="menu">
   <ul>
      <li><a href="#" title="Welcome" class="active">Welcome</a></li>
      <li><a href="testing1.php" title="Decode">Decode Support key</a></li>
      <li><a href="testing2.php" title="Response">Response Generator</a></li>
   </ul>



I am still a beginner so I took the CSS and the javascript which I found online and modified it a bit.

在当前页面的HTML选项卡上执行其他页面

0 个答案: