Javascript 单击“更改”选项卡的可见性？

我正在设计一个电子商务系统，在产品页面上有几个信息标签。我需要一个解决方案，当单击选项卡时，它会将所选选项卡的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>

功能切换可见性（id）{
var tabs_class=document.getElementsByClassName（“tab”）；
var tabs_id=document.getElementById（id）；
对于（变量i=0；i>tabs\u class.length；i++）{
tabs_class[i].style.display=“无”；
}
tabs_id.style.display='block'；
}




评论


退货政策


{$product_description}

产品照片

评论

退货政策

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

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

点击我！

或者不使用JQuery，您可以执行以下操作：

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

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

点击我！

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

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

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

点击我！

与其自己处理选项卡，为什么不使用jQueryUI为您处理选项卡呢。检查以下示例：

我用这个：

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

---

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

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

本机JavaScript：

---

以下代码将允许按钮将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>


功能切换可见性（id）{
var tabs_class=document.getElementsByClassName（“tab”）；
var tabs_id=document.getElementById（id）；
对于（变量i=0；i



评论


退货政策


{$product_description}

产品照片

评论

退货政策

请使用不引人注目的侦听器，而不是在
onclick
属性中嵌入JS。谢谢，但我不想因为一件简单的事情就包含整个jquery库。我知道它会改变CSS显示。我不知道他是否在乎这个区别。如果需要，也可以使用this.style.visibility=“hidden”。您错过了的登录（var i=0；i
上方的一个按钮，该按钮将被隐藏，以针对特定的div，并将可见性从隐藏更改为可见。尝试了一些类似于您的示例的操作，我用代码更新了原始帖子。但不起作用。更正，它正在将它们更改为
显示：block；
基于n ID，但它不会根据类更改
显示：无；
。发现错误。您有
i>元素。长度
需要一个