0

我正在使用 jQuery-UI 进行标签设计，虽然我的第二个标签中有一个表单，但当我用数据填充它并按“提交”时，整个页面都已加载（我知道因为表单在第二个选项卡，页面返回到提交后显示第一个选项卡）。

我怎样才能只使当前选项卡加载/刷新？

HTML 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link href="jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet">


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
    <script src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
    <script src="tabsJquery.js"></script>
</head>

<body>
<h1>Trader's Friend</h1>
<h2></h2>


<!-- Tabs -->
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Market Overview</a></li>
        <li><a href="pages/page1.html">Portfolios</a></li>
    </ul>
    <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>

page1.html：

<!DOCTYPE html>
<html>
<head>
    <title>Create New Portfolio</title>
    <script src="portfolio.js"></script>
    <script src="tabsJquery.js"></script>

</head>
<body>

<form  name="portfolio" id="portfolio" method="post" onsubmit="createNewPortfolio()">
    <p class="ui-widget-header" id="newPortfolioHeader" >General Info</p>
    Portfolio   Name:   <input type="text" id="portfolioName" name="portfolioName" value="test1"><br>
    Owner First Name:   <input type="text" id="ownerFName" name="ownerFName" value="eyal"><br>
    Owner Last  Name:   <input type="text" id="ownerLName" name="ownerLName" value="becker"><br>
    Init Amount:        <input type="number" id="initAmount" name="initAmount" value="1000"><br>
    Date:               <input type="text" id="datepicker" name="date" ><br>
    <p class="ui-widget-header" id="newPortfolioHeader" >Risk Management</p>
    Stocks (%):           <input type="number" id="stocksPerc" name="stocksPerc" value="50"><br>
    NonStocks (%):         <input type="number" id="nonStocksPerc" name="nonStocksPerc" value="50"><br>
    Risk In Stocks (%):    <input type="number" id="riskInStocksPerc" name="riskInStocksPerc"value="5"><br>
    Risk In nonStocks (%): <input type="number" id="riskInNonStocksPerc" name="riskInNonStocksPerc" value="5"><br>
    <input type="submit" value="submit">
</form>

</body>
</html>

创建新投资组合（）：

function createNewPortfolio() {


    var portfolioName = document.portfolio.portfolioName.value;

    var ownerFname = document.portfolio.ownerFName.value;
    var ownerLname = document.portfolio.ownerLName.value;
    var initAmount = document.portfolio.initAmount.value;
    var dateVal = document.portfolio.date.value;
    //alert(portfolioName + ownerFname + ownerLname + dateVal);
    var stocksPerc = document.portfolio.stocksPerc.value;
    var nonStocksPerc = document.portfolio.nonStocksPerc.value;
    var riskInStocksPerc = document.portfolio.riskInStocksPerc.value;
    var riskInNonStocksPerc = document.portfolio.riskInNonStocksPerc.value;
    //alert(stocksPerc + nonStocksPerc + riskInStocksPerc + riskInNonStocksPerc);

    var myNewPortfolioJsonObj = {

        "general": {
            "portfolioName": portfolioName,
            "ownerFname": ownerFname,
            "ownerLname": ownerLname,
            "initAmount": initAmount,
            "date": dateVal
        },
        "riskManagement": {
            "stocksPerc": stocksPerc,
            "nonStocksPerc": nonStocksPerc,
            "riskInStocksPerc": riskInStocksPerc,
            "riskInNonStocksPerc": riskInNonStocksPerc
        }


    };
    //alert(JSON.stringify(myNewPortfolioJsonObj));
    localStorage.setItem('Portfolios', JSON.stringify(myNewPortfolioJsonObj));
     //event.preventDefault();
}

tabsJquery.js:

$(function() {
    $( "#tabs" ).tabs();

    $( "#datepicker" ).datepicker({
        inline: true
    });
});

谢谢西万

4

0 回答 0