如何突出显示浏览器的多个选项卡之间的选项卡

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项目我需要将一些值传递给母版页，以便通过点击页面上的某个事件在一定时间后弹出警告对话框，如果用户在同一项目的其他选项卡中，我可以弹出在当前活动的选项卡上启动警报对话框，否则相反如果选项卡得到高亮显示它在一定时间后被禁止它是好的，如果我使用来自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>

可能有几种方法可以解决您的问题。但这很容易:) 欢呼声。