如何创建指向标签的链接?

时间:2018-08-06 17:06:37

标签: twitter-bootstrap tabs shopify

我正在使用一个带有引导程序的模板,上面带有一些选项卡。我想在my上创建一个链接,以使页面滚动到特定选项卡。例如,我想要该链接:

<a href="tab-cus-1">Shipping Information</a>

重定向到:

<div id="tabs" class="htabs">
  <a href="#tab-description" class="selected">Description</a>
  <a href="#tab-review" id="product-reviews-a" class="">Reviews</a>
  <a href="#tab-cus-1">Shipping</a>
  <a href="#tab-cus-2">Why buy from us?</a></div>

<div id="tab-cus-1" class="tab-content"></div>

我的网站:link

预先感谢

2 个答案:

答案 0 :(得分:1)

为此,您需要使用const app = express(); const server = new ApolloServer({ typeDefs, resolvers, context: ({ req }) => ({ storeRef: req.headers.storeref, httpClient: createHttpClient({ storeRef: req.headers.storeref, campaignId: req.headers.campaignid, languageId: req.headers.languageid }), }), tracing: true, cacheControl: true, engine: false, apiKey: <apikey> }); server.applyMiddleware({ app }); const engine = new ApolloEngine({ apiKey: <apikey>, }); engine.listen({ pipePath: process.env.PORT, httpServer: server }); 而不是<section>,并且所有属性都保持不变。

您可以执行<div>。如果它不起作用,请告诉我。

希望它能起作用!

答案 1 :(得分:0)

@Ayaan代码也正在工作……很好。

但是应该有更多的内容,以便可以将重点放在点击上:

<div id="tabs" class="htabs">
  <a href="#tab-description" class="selected">Description</a>
  <a href="#tab-review" id="product-reviews-a" class="">Reviews</a>
  <a href="#tab-cus-1">Shipping</a>
  <a href="#tab-cus-2">Why buy from us?</a>
</div>

<div id="tab-review">
Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

<div id="tab-cus-1" class="tab-content">
<b>Focus Shipping ...</b>

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

</div>

<div id="tab-cus-2">

<b>Why buy from us?</b>


It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>