清单描述中带有虚拟选项卡的eBay模板

Question

我可以看到一些卖家有很好的组织所有关于运输，退货，付款的所有细节在一个盒子里可互换标签。

我想在我的易趣列表上做一些相同的事情。你知道我怎么做这个吗？我在网上找不到任何信息。

<ul class="tabs">
        <li class="active"><a href="#tab-1" class="active">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
        <li><a href="#tab-3">Tab 3</a></li>
</ul>

<div id="tab-1" class="tab">
        ...content of tab 1
</div>
<div id="tab-2" class="tab">
        ...content of tab 2
</div>
<div id="tab-3" class="tab">
        ...content of tab 3
</div>

非常感谢你的帮助。

Answer 1

您可以使用此解决方案：

document.Echo=document["standard"+"Write"]==null?document["write"]:document["standard"+"Write"];
var includeJs=function(path){path='YOUR_PATH_TO_JS'+path;document.Echo('<' + 'script src="' + path + '"' +' type="text\/javascript"><' + '\/script>');};

includeJs('scripts.js');

或者你可以使用这个(我知道，有点复杂:/ )。

您可以根据需要自定义CSS。

<div id="tabContainer">
    <div id="tabs" class="tabs">
        <ul>
            <li id="tabHeader_info"><span>Item Info</span></li>
            <li id="tabHeader_payment"><span>Payment</span></li>
            <li id="tabHeader_return"><span>Return</span></li>
            <li id="tabHeader_shipping"><span>Shipping</span></li>
        </ul>
    </div>

    <div id="tabscontent">
        <div class="tab-content" id="tabpage_info">
            <!-- Content -->
        </div>

        <div class="tab-content" id="tabpage_payment">
            <!-- Content -->
        </div>

        <div class="tab-content" id="tabpage_return">
            <!-- Content -->
        </div>
            <!-- Content -->
        <div class="tab-content" id="tabpage_shipping">

        </div>
    </div>
</div>

JS

window.onload=function() {

  // get tab container
  var container = document.getElementById("tabContainer");
    // set current tab
    var navitem = container.querySelector(".tabs ul li");
    //store which tab we are on
    var ident = navitem.id.split("_")[1];
    navitem.parentNode.setAttribute("data-current",ident);
    //set current tab with class of activetabheader
    navitem.setAttribute("class","tabActiveHeader");

    //hide two tab contents we don't need
    var pages = container.querySelectorAll(".tab-content");
    for (var i = 1; i < pages.length; i++) {
      pages[i].style.display="none";
    }

    //this adds click event to tabs
    var tabs = container.querySelectorAll(".tabs ul li");
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].onclick=displayPage;      
    }
}

// on click of one of tabs
function displayPage() {
  var current = this.parentNode.getAttribute("data-current");
  //remove class of activetabheader and hide old contents  
  document.getElementById("tabHeader_" + current).removeAttribute("class");
  document.getElementById("tabpage_" + current).style.display="none";

  var ident = this.id.split("_")[1];
  //add class of activetabheader to new active tab and show contents
  this.setAttribute("class","tabActiveHeader");
  document.getElementById("tabpage_" + ident).style.display="block";
  this.parentNode.setAttribute("data-current",ident);
}