如何获取活动选项卡id以便能够在javascript中使用它_Javascript_Php_Html

如何获取活动选项卡id以便能够在javascript中使用它

javascript php html

如何获取活动选项卡id以便能够在javascript中使用它,javascript,php,html,Javascript,Php,Html,我有一个网站，有4个标签，每个标签将显示不同的数据查看我的网站，从第一个答案中提出修改建议。我还添加了一些关于我的网站设置的详细信息： <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> ...other code </scr

我有一个网站，有4个标签，每个标签将显示不同的数据

查看我的网站，从第一个答案中提出修改建议。我还添加了一些关于我的网站设置的详细信息：

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<script>
...other code
</script>

<h2>Measurements - graphs</h2>

<?php
... other php code
?>

<script>
var openedTabId = document.getElementsByClassName("opened")[0].getAttribute('id');
console.log(openedTabId);
if (tabId == "tab1") {
    // show data only for client1
} else if (tabId == "tab2") {
    // show data only for client2
}
// do other stuff
</script>

<style>
    /* Style the tab */
    .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }
    /* Style the buttons that are used to open the tab content */
    .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 */
    .tab button:hover {
        background-color: #ddd;
    }
    /* Create an active/current tablink class */
    .tab button.active {
        background-color: #ccc;
    }
    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
    } 
</style>

</head>

<body>
    <div class="tab">
        <button class="tablink" onclick="openTab('tab1', this, 'red')" id="defaultOpen">Client1</button>
        <button class="tablink" onclick="openTab('tab2', this, 'green')">Client2</button>
        <button class="tablink" onclick="openTab('tab3', this, 'blue')">Client3</button>
        <button class="tablink" onclick="openTab('tab4', this, 'orange')">Client4</button>
    </div>
    <!-- Tab content -->
    <div id="tab1" class="tabcontent">
        <p>Data from Client1</p>
    <div id="tab2" class="tabcontent">
        <p>Data from Client2</p>
    </div>
    <div id="tab3" class="tabcontent">
        <p>Data from Client3</p>
    </div>
    <div id="tab4" class="tabcontent">
        <p>Data from Client4</p>
    </div>

<script>
    function openTab(tabName,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(tabName).style.display = "block";
        document.getElementById(tabName).classList.add("opened");
        elmnt.style.backgroundColor = color;
    }
    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();
    document.getElementById("defaultOpen").classList.add("opened");
</script>

</body>
</html>

支持这些选项卡的脚本是，没有建议的更改：

<script>
function openTab(tabName,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(tabName).style.display = "block";
  elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

我该怎么做

谢谢

当您打开选项卡时，请向其中添加一个类。这样，您可以在以后识别它：

<script>
function openTab(tabName,elmnt,color) {
  ...
  let active = document.getElementById(tabName);

  active.style.display = "block";
  active.classList.add("active");
  ...
}
</script>


函数openTab（tabName、elmnt、color）{
...
让active=document.getElementById（tabName）；
active.style.display=“block”；
active.classList.add（“active”）；
...
}


var tabId=document.getElementsByClassName（'active'）[0].getAttribute（'id'）；

在打开下一个选项卡之前，不要删除所有选项卡上的所有

.active

类。另外，最好在第二部分做一些错误检查-例如，您可能至少想检查是否有任何活动选项卡。

更新了答案以解决您的问题

函数openTab（tabName、elmnt、color）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i


/*设置选项卡的样式*/
.标签{
溢出：隐藏；
边框：1px实心#ccc；
背景色：#f1f1；
}
/*设置用于打开选项卡内容的按钮的样式*/
.选项卡按钮{
背景色：继承；
浮动：左；
边界：无；
大纲：无；
光标：指针；
填充：14px 16px；
过渡：0.3s；
}
/*更改悬停按钮的背景色*/
.tab按钮：悬停{
背景色：#ddd；
}
/*创建活动/当前tablink类*/
.tab按钮。激活{
背景色：#ccc；
}
/*设置选项卡内容的样式*/
.tabcontent{
显示：无；
填充：6px 12px；
边框：1px实心#ccc；
边界顶部：无；
}

测量-图形
客户1
客户2
客户3
客户4
来自客户端1的数据
来自Client2的数据
来自Client3的数据
来自客户端的数据4
函数openTab（tabName、elmnt、color）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i
看起来很简单，但我遇到了一个错误-未捕获的TypeError:document.GetElementsByCassName（…）[0]未定义
。我更新了我的问题，更详细地介绍了我的网站是如何设置的，我需要在哪里查看openedtabd
@FotisK的信息现在检查答案您的HTML中也有一个缺少的
，这就是我发布整个解决方案的原因。它对您有效吗，因为我运行了代码片段，它总是显示tab1（在您的回答中）！？这是因为您将tab1设置为默认打开状态，并且控制台在页面加载时执行
function openTab(tabName,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(tabName).style.display = "block";
    document.getElementById(tabName).classList.add("opened");
    window.tabId = document.getElementsByClassName("opened")[0].getAttribute('id');
    console.log(window.tabId); // it always logs 'tab1' ??
    elmnt.style.backgroundColor = color;
}

<script>
function openTab(tabName,elmnt,color) {
  ...
  let active = document.getElementById(tabName);

  active.style.display = "block";
  active.classList.add("active");
  ...
}
</script>

<script>
var tabId = document.getElementsByClassName('active')[0].getAttribute('id');
</script>