Question

我正在设计一个电子商务系统，在产品页面上会有几个信息标签。我需要一个解决方案，当单击选项卡时，它会将HTML CSS的样式元素更改为style="visibility: visibile'"所选选项卡，将其他选项卡更改为style="visibility: hidden;"。

在HTML中使用OnClick=""有一种简单的方法吗？我很抱歉，Javascript并不是我的强大套件。

<script type="text/javascript">
    function toggleVisibility(id) {
        var tabs_class = document.getElementsByClassName("tab");

        var tabs_id = document.getElementById(id);

        for ( var i = 0; i > tabs_class.length; i++){
            tabs_class[i].style.display = "none";
        }

        tabs_id.style.display = 'block';
    }
</script>

<ul class="tabs">
    <li class="active">
        <a onclick="toggleVisibility('product_description');">Description</a>
    </li>
    <li>
        <a href="#" onclick="toggleVisibility('product_photos');">Photos</a>
    </li>
    <li>
        <a onclick="toggleVisibility('product_reviews');">Reviews</a>
    </li>
    <li>
        <a onclick="toggleVisibility('return_policy');">Return Policy</a>
    </li>
</ul>

<div class="tab" id="product_description">
    <p>{$product_description}</p>
</div>
<div class="tab" id="product_photos" style="display: none;">
    <p>Product Photos</p>
</div>
<div class="tab" id="product_reviews" style="display: none;">
    <p>Reviews</p>
</div>
<div class="tab" id="return_policy" style="display: none;">
    <p>Return Policy</p>
</div>

Answer 1

原生JavaScript：

// get all tags
var tags = document.getElementsByClassName("tag");

// register onclick event on tags
tags.addEventListener('click', modifyVisibility, false);

function modifyVisibility() {
    // set all to hidden
    tags.style.visibility = 'hidden';
    // set clicked tag to visible
    this.style.visibility = 'visible';
}

Answer 2

如果包含JQuery，可以使用以下命令更改“display”属性：

<div id='clickMe' onclick='$("#clickMe").hide()'>Click on me!</div>

或者没有JQuery你可以这样做：

<div id='clickMe' onclick='this.style.display = "none";'>Click on me!</div>

如果您需要更改“visibility”属性，可以执行以下操作：

<div id='clickMe' onclick='this.style.visibility = "hidden";'>Click on me!</div>

Answer 3

为什么不使用jQueryUI为您执行选项卡，而不是自己处理选项卡。请查看以下示例：

https://jqueryui.com/tabs/

Answer 4

我用这个：

<div id="popupInfo">
  <div class="closeButton" 
      onclick="document.getElementById('popupInfo').style.visibility = 'hidden';">
 </div>
contents....
</div>

其中closebutton使用包含＆＃39; X＆＃39;的.png。有两种灰色...

.closeButton
{
    position: absolute;
    width: 32px;
    height: 32px;
    background: transparent url(4x4_X.png);
    right: 5px;
    top: 5px;
}
.closeButton:hover
{
    background-position: 0px -32px;
    z-index: 99;
}

Answer 5

只需在他们的指南中包含一个类并获得相同的内容并添加样式

var elements = document.getElementsByClassName("className");
for(var i = 0; i > elements.lenght; i++){
     elements[i].style.visibility = "hidden";
}
current.style.visibility = "visibile";

Answer 6

以下代码将允许按钮为具有指定类的所有元素将CSS显示属性设置为display: none;。它还会将具有指定ID的元素设置为display: block;。

    <script type="text/javascript">
        function toggleVisibility(id) {
            var tabs_class = document.getElementsByClassName("tab");

            var tabs_id = document.getElementById(id);

            for ( var i = 0; i < tabs_class.length; i++ ) {
                tabs_class[i].style.display = "none";
            }

            tabs_id.style.display = "block";
        }
    </script>

    <ul class="tabs">
        <li class="active">
            <a onclick="toggleVisibility('product_description');">Description</a>
        </li>
        <li>
            <a href="#" onclick="toggleVisibility('product_photos');">Photos</a>
        </li>
        <li>
            <a onclick="toggleVisibility('product_reviews');">Reviews</a>
        </li>
        <li>
            <a onclick="toggleVisibility('return_policy');">Return Policy</a>
        </li>
    </ul>

    <div class="tab" id="product_description">
        <p>{$product_description}</p>
    </div>
    <div class="tab" id="product_photos" style="display: none;">
        <p>Product Photos</p>
    </div>
    <div class="tab" id="product_reviews" style="display: none;">
        <p>Reviews</p>
    </div>
    <div class="tab" id="return_policy" style="display: none;">
        <p>Return Policy</p>
    </div>

Onclick更改选项卡可见性？

6 个答案:

原生JavaScript：