如何突出顯示瀏覽器的多個選項卡之間的選項卡

Question

如果我在選項卡中使用alert命令（jQuery），並且如果在其他選項卡中，則當警報彈出時，該選項卡開始閃爍。

但是我想要一個自定義對話框，所以我創建了一個。問題是當我使用自定義對話框時，選項卡沒有被突出顯示。

$(document).ready(function() { 
 
    var dialog = $('#window'); 
 
    
 
    $('#exit').click(function() { 
 
    dialog.hide(); 
 
    }); 
 
    
 
    $('#snooze').click(function() { 
 
    var selected = $('#dropdown :selected').val(); 
 
    dialog.hide(); 
 

 
    setTimeout(function() { 
 
     dialog.show(); 
 
    }, selected * 1000); 
 
    }); 
 
    
 
    $('#show').click(function() { 
 
    dialog.show(); 
 
    }); 
 
});

#exit { 
 
    padding: 4px 8px; 
 
} 
 

 
#window { 
 
    width: 400px; 
 
    height: 150px; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0%; 
 
    right: 0%; 
 
    bottom: 0%; 
 
    left: 0%; 
 
    /*background: linear-gradient(top, #ffffff 0%, #93d2ed 73%);*/ 
 
    border: 1px solid gray; 
 
    font-family: sans-serif; 
 
    /* padding: 5px 10px 20px 20px;*/ 
 
} 
 

 
#snoozetimer { 
 
    border: 1px solid grey; 
 
    padding: 2px 2px 4px 4px 
 
} 
 

 
#head { 
 
    background: #76DBEA; 
 
    display: block; 
 
    padding: 5px 10px 5px 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="window"> 
 
    <span id="head">Time out alert</span> 
 
    <h3 style="padding:0px 5px"> 
 
    <p>Please Submit Time In !</p> 
 
    </h3> 
 
    <span><img src="alarm.gif" alt="image" style="position:absolute;right:10%;top:25%;display:inline-block; width=50px;height:50px;"></img></span> 
 

 
    <button id="exit">Close </button> 
 
    <span id="snoozetimer"> 
 
    <select id="dropdown"> 
 
     <option value="5">5-Minutes</option> 
 
     <option value="10">10-Minutes</option> 
 
     <option value="15">15-Minutes</option> 
 
     <option value="20">20-Minutes</option> 
 
     <option value="25">25-Minutes</option> 
 
     <option value="30">30-Minutes</option> 
 
    </select> 
 
    <button id="snooze">Snooze </button> 
 
    </span> 
 
</div>

**我有一個ASP.net項目，我需要通過一些價值，掌握頁面，以便警告對話框頁面上的某個時間通過點擊特定事件後彈出，如果用戶是在同一個項目的其他選項卡，我可以彈出當前活動選項卡上的警報對話框，否則相反，如果選項卡獲取高亮顯示它在一定的時間後它是clikced它的罰款，如果我使用jquery預定義警報其工作，因爲我想但如果我使用custum創建對話框彈出其doenot有真正的警報框的力量如果有人知道任何解決方案請告訴我 **

Answer 1

我使用w3school代碼創建了選項卡並嘗試回答您的場景。 我相信你可以輕鬆地使用這個簡單的方法。在這裏我附上了它的整個代碼。 在您過期後將鬧鐘暫停後，即使您當時處於任何標籤，標籤1也會高亮顯示。

function openCity(evt, tab) { 
 
    // Declare all variables 
 
    var i, tabcontent, tablinks; 
 

 
    // Get all elements with class="tabcontent" and hide them 
 
    tabcontent = document.getElementsByClassName("tabcontent"); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
    tabcontent[i].style.display = "none"; 
 
    } 
 

 
    // Get all elements with class="tablinks" and remove the class "active" 
 
    tablinks = document.getElementsByClassName("tablinks"); 
 
    for (i = 0; i < tablinks.length; i++) { 
 
    tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
    } 
 

 
    // Show the current tab, and add an "active" class to the button that opened the tab 
 
    document.getElementById(tab).style.display = "block"; 
 
    evt.currentTarget.className += " active"; 
 
} 
 

 
var dialog = $('#window'); 
 

 
$('#exit').click(function() { 
 
    dialog.hide(); 
 
}); 
 

 
$('#snooze').click(function() { 
 
    var selected = $('#dropdown :selected').val(); 
 
    dialog.hide(); 
 

 
    setTimeout(function() { 
 
    var tablinks1 = document.getElementsByClassName("tablinks"); 
 
    for (i = 0; i < tablinks1.length; i++) { 
 
     if (tablinks1[i].className === 'tablinks tab1') { 
 
     tablinks1[i].className = "tablinks tab1 active"; 
 
     } else { 
 
     tablinks1[i].className = tablinks1[i].className.replace(" active", ""); 
 
     } 
 
    } 
 
    dialog.show(); 
 
    }, selected * 1000); 
 
}); 
 

 
$('#show').click(function() { 
 
    var tablinks1 = document.getElementsByClassName("tablinks"); 
 
    for (i = 0; i < tablinks1.length; i++) { 
 
    if (tablinks1[i].className === 'tablinks tab1') { 
 
     tablinks1[i].className = "tablinks tab1 active"; 
 
    } else { 
 
     tablinks1[i].className = tablinks1[i].className.replace(" active", ""); 
 
    } 
 
    } 
 
    dialog.show(); 
 
});

#exit { 
 
    padding: 4px 8px; 
 
} 
 

 
#window { 
 
    width: 400px; 
 
    height: 150px; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0%; 
 
    right: 0%; 
 
    bottom: 0%; 
 
    left: 0%; 
 
    /*background: linear-gradient(top, #ffffff 0%, #93d2ed 73%);*/ 
 
    border: 1px solid gray; 
 
    font-family: sans-serif; 
 
    /* padding: 5px 10px 20px 20px;*/ 
 
} 
 

 
#snoozetimer { 
 
    border: 1px solid grey; 
 
    padding: 2px 2px 4px 4px 
 
} 
 

 
#head { 
 
    background: #76DBEA; 
 
    display: block; 
 
    padding: 5px 10px 5px 10px; 
 
} 
 

 

 
/* Style the tab */ 
 

 
div.tab { 
 
    overflow: hidden; 
 
    border: 1px solid #ccc; 
 
    background-color: #f1f1f1; 
 
} 
 

 

 
/* Style the buttons inside the tab */ 
 

 
div.tab button { 
 
    background-color: inherit; 
 
    float: left; 
 
    border: none; 
 
    outline: none; 
 
    cursor: pointer; 
 
    padding: 14px 16px; 
 
    transition: 0.3s; 
 
} 
 

 

 
/* Change background color of buttons on hover */ 
 

 
div.tab button:hover { 
 
    background-color: #ddd; 
 
} 
 

 

 
/* Create an active/current tablink class */ 
 

 
div.tab button.active { 
 
    background-color: #ccc; 
 
} 
 

 

 
/* Style the tab content */ 
 

 
.tabcontent { 
 
    display: none; 
 
    padding: 6px 12px; 
 
    border: 1px solid #ccc; 
 
    border-top: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 

 
    <button id="show">show </button> 
 

 

 

 
    <div class="tab"> 
 
    <button class="tablinks tab1" onclick="openCity(event, 'Tab1')">Tab1</button> 
 
    <button class="tablinks tab2" onclick="openCity(event, 'Tab2')">Tab2</button> 
 
    <button class="tablinks tab3" onclick="openCity(event, 'Tab3')">Tab3</button> 
 
    </div> 
 

 
    <div id="Tab1" class="tabcontent"> 
 
    <h3>Tab1</h3> 
 

 
    <div id="window"> 
 
     <span id="head">Time out alert</span> 
 
     <h3 style="padding:0px 5px"> 
 
     <p>Please Submit Time In !</p> 
 
     </h3> 
 
     <span><img src="alarm.gif" alt="image" style="position:absolute;right:10%;top:25%;display:inline-block; width=50px;height:50px;"></img></span> 
 

 
     <button id="exit">Close </button> 
 
     <span id="snoozetimer"> 
 
     <select id="dropdown"> 
 
      <option value="5">5-Minutes</option> 
 
      <option value="10">10-Minutes</option> 
 
      <option value="15">15-Minutes</option> 
 
      <option value="20">20-Minutes</option> 
 
      <option value="25">25-Minutes</option> 
 
      <option value="30">30-Minutes</option> 
 
     </select> 
 
     <button id="snooze">Snooze </button> 
 
     </span> 
 
    </div> 
 
    </div> 
 

 
    <div id="Tab2" class="tabcontent"> 
 
    <h3>Tab2</h3> 
 

 
    </div> 
 

 
    <div id="Tab3" class="tabcontent"> 
 
    <h3>Tab3</h3> 
 
    </div> 
 

 
</body> 
 

 
</html>

可能有幾種方法可以做到你的問題。但是這是很容易的:) 乾杯。