Question

我可以看到一些卖家在一个包含可交换标签的方框中整理了有关运费，退货，付款的所有详细信息。

我想在我的ebay列表上做同样的事情。你知道我怎么能做到这一点？我在互联网上找不到任何信息。

<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。

<强> HTML

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

Answer 2

你可以完全通过CSS完成，这意味着eBay缺少JS应该不是问题。

我在这里上传了CSS：http://www.elliotjreed.com/public/tabs.css

这是HTML：

<div id="wrap">
    <div id="container">
        <div id="tabs">
            <ul>
                <li id="One"><a href="#One" id="first">One</a>
                    <div>
                        <p>Some stuff</p>
                    </div>
                </li>
                <li id="Two"><a href="#Two" id="sec">Two</a>
                    <div>
                        <p>More stuff</p>
                    </div>
                </li>
                <li id="Three"><a href="#Three" id="third">Three</a>
                    <div>
                        <p>You guessed it: more stuff again.</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

eBay模板，列表描述中包含虚拟标签

2 个答案: