0

我可以看到一些卖家在一个带有可交换标签的盒子中很好地组织了有关运输、退货、付款的所有细节。

我想在我的易趣清单上做同样的事情。你知道我该怎么做吗？我在互联网上找不到任何信息。

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

非常感谢您的帮助。

4

2 回答 2

2

您可以使用此解决方法：

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);
}
于 2013-12-13T12:33:46.467 回答
0

您可以完全通过 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>
于 2013-12-13T12:32:53.383 回答