用javascript提交的窗體打開標籤提交

我有一個非常簡單的窗體示例，它被分成了一些標籤，它被髮布到自己的驗證和處理與PHP，簡化版本的代碼如下（沒有驗證和處理步驟）：用javascript提交的窗體打開標籤提交

<style> 
/* Style the list */ 
ul.tab { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    border: 1px solid #ccc; 
    background-color: #f1f1f1; 
} 

/* Float the list items side by side */ 
ul.tab li {float: left;} 

/* Style the links inside the list items */ 
ul.tab li a { 
    color: black; 
    display: inline-block; 
    font-size: 15px; 
    font-weight: lighter; 
    padding: 14px 16px; 
    text-align: center; 
    text-decoration: none; 
    transition: all 0.3s ease 0s; 
} 

/* Change background color of links on hover */ 
ul.tab li a:hover {background-color: #ddd;} 

/* Create an active/current tablink class */ 
ul.tab li a:focus, .active {background-color: #ccc;} 

/* Style the tab content */ 
.tabcontent { 
    display: none; 
    padding: 60px 10px; 
    border: 1px solid #ccc; 
    border-top: none; 
    margin-bottom: 20px; 
} 
</style> 

<ul class="tab"> 
<li><a href="#" class="tablinks" onclick="openTab(event, 'tab_1')">tab 1</a></li> 
<li><a href="#" class="tablinks" onclick="openTab(event, 'tab_2')">tab 2</a></li> 
</ul> 

<!-- FORM Starts --> 
<form method="POST" action=""> 
<div id="tab_1" class="tabcontent"> 
Tab One Content 
</div> 

<div id="tab_2" class="tabcontent"> 
Tab Two Content 
</div> 

<input type="submit" name="save_settings_button" value="Save Settings" /> 
</form> 

<script> 
function openTab(evt, tabName) { 
    var i, tabcontent, tablinks; 
    tabcontent = document.getElementsByClassName("tabcontent"); 
    for (i = 0; i < tabcontent.length; i++) { 
     tabcontent[i].style.display = "none"; 
    } 
    tablinks = document.getElementsByClassName("tablinks"); 
    for (i = 0; i < tabcontent.length; i++) { 
     tablinks[i].classList.remove("active"); 
    } 
    document.getElementById(tabName).style.display = "block"; 
    evt.currentTarget.classList.add("active"); 
} 

var mybtn = document.getElementsByClassName("tablinks")[0]; 
mybtn.click(); 
</script>

這有助於大單分解成部分。然而如果在選項卡用戶，並按下提交按鈕，他們會回到標籤之一，不是一個很好的用戶體驗！

有沒有什麼辦法可以在提交表單時識別哪個選項卡處於焦點狀態，然後在頁面重新加載後重新加載該選項卡上的頁面？

來源

2017-04-21 user1419810

由於您在提交表單後處理了所有與php有關的事情，因此在頁面刷新後知道活動選項卡的唯一方法是在表單中添加自定義字段並在更改選項卡時進行更新。

所以在你的HTML

<input type="hidden" id="active_tab" name="active_tab" value="tab_1" />

那麼你應該編輯openTab功能時，它被稱爲更新此輸入。

document.getElementById("active_tab").value = tabName;

現在在PHP中，加載你的頁面，當你添加一個新的變量來捕獲活動標籤和更新活動類的標籤。

$active_tab = $_POST['active_tab']; 
$active_tab1 = ""; 
$active_tab2 = ""; 
if ($active_tab ==="tab_1") $active_tab1 = "active"; 
if ($active_tab ==="tab_2") $active_tab2 = "active";

然後上次更新您的選項卡以使用活動類。

<div id="tab_1" class="tabcontent <?php echo $active_tab1; ?>">...</div> 
div id="tab_2" class="tabcontent <?php echo $active_tab2; ?>">...</div>

這是不是要走不過，對於更好的用戶體驗我會改變一切形式的最佳方式提交給Ajax調用和處理外部PHP文件的一切。

來源

2017-04-21 12:30:05

我會檢查是否存在active類，以確定哪個選項卡當前處於活動狀態。例如類似tablink.classList.contains('active')的東西。

來源

2017-04-21 12:19:45 heylookltsme

用javascript提交的窗體打開標籤提交

回答

相關問題