Question

这里我试图创建简单的三个标签，我希望当你点击标签按钮然后你可以看到相关的文字，但它不起作用，有人能帮帮我吗？我已经添加了jsfiddle链接，你可以测试它。我想也许问题是因为java中for循环的顺序。

CSS

.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;
    }

JAVA

function open(evt, name) {
    // 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(name).style.display = "block";
    evt.currentTarget.className += " active";

}

HTML

<div class="tab">
                    <button class="tablinks" onclick="open(event, 'g')" id="defaulttab">   GGGGGGG</button>
                    <button class="tablinks" onclick="open(event, 'aufbau')"> AAAAA</button>
                    <button class="tablinks" onclick="open(event, 'auto')">UUUUU</button>
                </div>

                <!-- Tab content -->
                <div id="g" class="tabcontent">
                <p>              
                text1 </p>

                </div>
                   <div id="a" class="tabcontent">    <p>              
                text2 </p></div>
                      <div id="u" class="tabcontent">    <p>              
                text3 </p></div>

https://jsfiddle.net/ouajb9jw/4/

Answer 1

首先＆＃34;欢迎来到javascript世界!!!＆＃34;

您目前正在使用javascript，which is different from JAVA。我发现MDN非常有资格学习javascript，HTML和CSS。

就您的解决方案而言：请使用javascript的原生函数进行制表切换。

一种方法是：

＆＃13;

var tabLinkElms = document.getElementsByClassName('tablinks');
for (var i = 0; i < tabLinkElms.length; i++) {
    tabLinkElms[i].addEventListener('click', open, false);
}

function open(event) {
  // get currently clicked link element
  var activeLinkElm = event.target;
  // get previously clicked link element
  var prevActiveLinkElm = document.getElementsByClassName("active");
  // refer nodelist
  prevActiveLinkElm = prevActiveLinkElm[0];
  
  // get related content div from data api of HTML
  var activeContentElmId = activeLinkElm.dataset.target;
  var prevContentElmId = prevActiveLinkElm.dataset.target;
  
  // remove classes from previously selected elements
  prevActiveLinkElm.classList.remove("active");
  document.getElementById(prevContentElmId).classList.remove("displayBlock");
  
  // add classes to currently selected elements
  activeLinkElm.classList.add("active");
  document.getElementById(activeContentElmId).classList.add("displayBlock");


}

＆＃13;

.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;
}

.displayBlock {
  display: block;
}

＆＃13;

<div class="tab">
  <a class="tablinks active" data-target="id1">GGGGGGG</a> |
  <a class="tablinks" data-target="id2"> AAAAA</a> |
  <a class="tablinks" data-target="id3">UUUUU</a>
</div>

<!-- Tab content -->
<div id="id1" class="tabcontent displayBlock">
  <p> text1 </p>
</div>
<div id="id2" class="tabcontent">
  <p> text2 </p>
</div>
<div id="id3" class="tabcontent">
  <p> text3 </p>
</div>

＆＃13;

P.S。我希望您听说过jQuery和bootstrap

Answer 2

＆＃13;

function openCity(evt, cityName) {
    // 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(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

＆＃13;

/* 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;
}

＆＃13;

<!-- Tab links -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'one')">London</button>
  <button class="tablinks" onclick="openCity(event, 'two')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'three')">Tokyo</button>
</div>

<!-- Tab content -->
<div id="one" class="tabcontent">
  <p>London is the capital city of England.</p>
</div>

<div id="two" class="tabcontent">
  <p>Paris is the capital of France.</p> 
</div>

<div id="three" class="tabcontent">
  <p>Tokyo is the capital of Japan.</p>
</div>

＆＃13;

Html标签内容可点击？

2 个答案: