时间戳

首页 > 解决方案 > 如何在同一选项卡和页面中打开新内容/代码

javascript - 如何在同一选项卡和页面中打开新内容/代码

问题描述

我有一个带有多个标签的页面。
我希望如果用户单击“主页”选项卡，它会给他一个密码表单，在他写下密码（1234）后，它会将他带到另一个页面（位于另一个位置）或另一个代码（它可以是隐藏在同一个页面中）但在同一个 TAB中。

我尝试使用以下代码：

表格是：

            <div class="">
<h4 class="form-title my-5 pb-1">C</h4>
<form class="mb-3" method="post" data-request="accountLogin::onSignIn" name="login">
    <div class="js-error-message alert alert-danger d-none" aria-live="polite"></div>
    <input type="hidden" name="redirect" value="/account">


    <div class="form-group">
        <input type="password" class="form-control" name="pswrd" id="login-password" placeholder="Password" autocomplete="current-password" required="">
        <label for="login-password" class="">Password</label>
        <span role="button" class="password-visibility js-toggle-password-visible" title="Show password" aria-label="Show password" data-hidden-icon="mdi mdi-eye-off" data-shown-icon="mdi mdi-eye" data-hidden-text="Show password" data-shown-text="Hide password">
            <i class="icon mdi" aria-hidden="true"></i>
        </span>

        <div class="alert alert-warning mt-3 js-password-space-warning d-none">You have entered backspace in password</div>
    </div>

    <div class="form-group mt-5 d-flex align-items-center justify-content-between">

        <button type="submit" onclick="check(this.form)" value="Login" class="js-submit-button btn btn-primary">
            Login
        </button>
    </div>
</form>

这是整个代码：

* {box-sizing: border-box}

/* Set height of body and the document to 100% */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}

/* Style tab links */
.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}

.tablink:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}

#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}

<button class="tablink" onclick="openPage('Home', this, 'red')" id="defaultOpen">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">About</button>

<div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p>Home is where the heart is..</p>
  
                <div class="">
    <h4 class="form-title my-5 pb-1">C</h4>
    <form class="mb-3" method="post" data-request="accountLogin::onSignIn" name="login">
        <div class="js-error-message alert alert-danger d-none" aria-live="polite"></div>
        <input type="hidden" name="redirect" value="/account">

 
        <div class="form-group">
            <input type="password" class="form-control" name="pswrd" id="login-password" placeholder="Password" autocomplete="current-password" required="">
            <label for="login-password" class="">Password</label>
            <span role="button" class="password-visibility js-toggle-password-visible" title="Show password" aria-label="Show password" data-hidden-icon="mdi mdi-eye-off" data-shown-icon="mdi mdi-eye" data-hidden-text="Show password" data-shown-text="Hide password">
                <i class="icon mdi" aria-hidden="true"></i>
            </span>

            <div class="alert alert-warning mt-3 js-password-space-warning d-none">You have entered backspace in password</div>
        </div>

        <div class="form-group mt-5 d-flex align-items-center justify-content-between">
   
            <button type="submit" onclick="check(this.form)" value="Login" class="js-submit-button btn btn-primary">
                Login
            </button>
        </div>
    </form>
	
	<script language="javascript">
function check(form)/*function to check userid & password*/
{
 /*the following code checkes whether the entered userid and password are matching*/
 if(form.pswrd.value == "1234")
  {
 
	document.write("sales/index.html");
  }
 else
 {
   alert("Wrong password. Try again")/*displays error message*/
  }
}
</script>
</div>

</div>

<div id="News" class="tabcontent">
  <h3>News</h3>
  <p>Some news this fine day!</p> 
</div>

<div id="Contact" class="tabcontent">
  <h3>Contact</h3>
  <p>Get in touch, or swing by for a cup of coffee.</p>
</div>

<div id="About" class="tabcontent">
  <h3>About</h3>
  <p>Who we are and what we do.</p>
</div>

<script>
function openPage(pageName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

应该将数据放在同一个选项卡和页面中。

但我得到的只是一个打开的新页面，上面写着“sales/index.html”

我检查了许多 SOF 主题，但没有得到最终答案。

同样，我想在输入密码后在同一选项卡中打开新内容。

标签： javascripthtml

解决方案

document.write("sales/index.html");只是将它看到的内容写入浏览器。

要从 sales/index.html 获取数据，您必须使用fetch( https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch )

然后获取返回的数据并将其写入页面。不推荐使用 document.write。而是添加一个占位符<div id="some_id">...</div>，然后将内容写入该占位符div

** 注意 ** 您的提交按钮也必须返回false，否则将导致页面在提交表单时刷新。所以喜欢<button type="submit" onclick="check(this.form); return false;" value="Login" class="js-submit-button btn btn-primary">

Fetch如果您是新手，使用起来有点棘手。（可选地，您可以使用 jQuery get https://api.jquery.com/jquery.get/）但是，fetch值得学习。

就像是：

fetch('sales/index.html').then(function(response) {
    return response.text();
}).then(function(content) {
    console.log(content);
}).catch(function(err) {
   console.log('Fetch Error', err);
});

完整代码

* {box-sizing: border-box}

/* Set height of body and the document to 100% */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}

/* Style tab links */
.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}

.tablink:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}

#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}
<button class="tablink" onclick="openPage('Home', this, 'red')" id="defaultOpen">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">About</button>

<div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p>Home is where the heart is..</p>
  
                <div class="">
    <h4 class="form-title my-5 pb-1">C</h4>
    <form class="mb-3" method="post" data-request="accountLogin::onSignIn" name="login">
        <div class="js-error-message alert alert-danger d-none" aria-live="polite"></div>
        <input type="hidden" name="redirect" value="/account">

 
        <div class="form-group">
            <input type="password" class="form-control" name="pswrd" id="login-password" placeholder="Password" autocomplete="current-password" required="">
            <label for="login-password" class="">Password</label>
            <span role="button" class="password-visibility js-toggle-password-visible" title="Show password" aria-label="Show password" data-hidden-icon="mdi mdi-eye-off" data-shown-icon="mdi mdi-eye" data-hidden-text="Show password" data-shown-text="Hide password">
                <i class="icon mdi" aria-hidden="true"></i>
            </span>

            <div class="alert alert-warning mt-3 js-password-space-warning d-none">You have entered backspace in password</div>
        </div>

        <div class="form-group mt-5 d-flex align-items-center justify-content-between">
   
            <button type="submit" onclick="check(this.form); return false;" value="Login" class="js-submit-button btn btn-primary">
                Login
            </button>
        </div>
    </form>
	
	<script language="javascript">
function check(form)/*function to check userid & password*/
{
 /*the following code checkes whether the entered userid and password are matching*/
 if(form.pswrd.value == "1234")
  {

    var frmselector = document.querySelector('form.mb-3');
    
    fetch('sales/index.html').then(function(response) {
        return response.text();
    }).then(function(content) {
        console.log(content);
        frmselector.innerHTML = content;
    }).catch(function(err) {
       console.log('Fetch Error', err);
        frmselector.innerHTML = 'There was an error: ' + err;
    });

  }
 else
 {
   alert("Wrong password. Try again")/*displays error message*/
  }
}
</script>
</div>

</div>

<div id="News" class="tabcontent">
  <h3>News</h3>
  <p>Some news this fine day!</p> 
</div>

<div id="Contact" class="tabcontent">
  <h3>Contact</h3>
  <p>Get in touch, or swing by for a cup of coffee.</p>
</div>

<div id="About" class="tabcontent">
  <h3>About</h3>
  <p>Who we are and what we do.</p>
</div>

<script>
function openPage(pageName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

推荐阅读