Highlighted

Hyperlink to Tab

Explorer ,
Feb 07, 2018

Copy link to clipboard

Copied

Hello everybody

Ich arbeite mit DW CC2018 und benutze Bootstrap - ganz tolles Tool!

Mein Problem: Ich möchte Hyperlinks direkt auf ein Ziel in einem Tab-Content setzen.

Beispiel 1: Im Tab "At Work" soll Use recycled paper angesteuert werden. Dazu muss ja der zweite Tab geöffnet werden und natürlich muss das Ziel mit einer id definiert werden.

Beispiel 2: Von einer anderen Seite soll Form walking/biking clubs angezeigt werden. Der Fall ist ähnlich, aber es handelt sich um ein Tab mit Dropdown.

Es gibt eine Menge Vorschläge im Internet, immer mit einem JS, das eingefügt werden muss.

Aber keine der Lösungen funktioniert.

Ich bin dankbar für jeden Hinweis, der zum Ziel führt.

Hier der Code für das Tab-Panel:

<div role="tabpanel">

          <ul class="nav nav-tabs" role="tablist">

            <li role="presentation" class="active"><a href="#home1" data-toggle="tab" role="tab" aria-controls="tab1">At Home</a></li>

            <li role="presentation"><a href="#paneTwo1" data-toggle="tab" role="tab" aria-controls="tab2">At Work</a></li>

            <li role="presentation" class="dropdown"><a href="#" id="tabDropOne1" class="dropdown-toggle" data-toggle="dropdown" role="tab" aria-controls="tab3" aria-haspopup="true" aria-expanded="false">In the community<span class="caret"></span></a>

              <ul class="dropdown-menu" aria-labelledby="tabDropOne1">

                <li><a href="#tabDropDownOne1" tabindex="-1" data-toggle="tab">Activities</a></li>

                <li><a href="#tabDropDownTwo1" tabindex="-1" data-toggle="tab">Gardening</a></li>

              </ul>

            </li>

        </ul>

          <div id="tabContent2" class="tab-content">

            <div role="tabpanel" class="tab-pane fade in active" id="home1">

              <ul>

                  <li>Turn off lights in empty rooms</li>

                  <li>Use motion sensors to turn lights on</li>

                  <li>Install Compact Fluorescent lighting (CFL)</li>

                <li>Turn the thermostat down</li>

              </ul>

            </div>

            <div role="tabpanel" class="tab-pane fade" id="paneTwo1">

              <ul>

                <li>Use recycled paper.</li>

                <li>Print on both sides of the paper</li>

                <li>Turn your computer screen off when you leave your desk</li>

              </ul>

            </div>

            <div role="tabpanel" class="tab-pane fade" id="tabDropDownOne1">

              <ul>

                <li>Ask your local government to institute green policies</li>

                <li>Form walking/biking clubs</li>

                <li>Form a subscription club to swap newspapers and magazines</li>

              </ul>

            </div>

            <div role="tabpanel" class="tab-pane fade" id="tabDropDownTwo1">

              <ul>

                <li>Create a community garden for herbs, fruits and vegetables</li>

                <li>Recycle dead branches and lawn waste as mulch </li>

                <li>Create a community garden for herbs, fruits and vegetables</li>

              </ul>

            </div>

        </div>

      </div>

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

<Is it possible to reference a hyperlink to a specific Book inside of a Tab?>

I don't think Tabbed panels are your best choice.  It would make a lot more sense to hyperlink directly to the Book's detail page with PHP and MySQL.   And this is not something DW can do unless you purchase a commercial extension or code it yourself.

Nancy

Views

429

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Hyperlink to Tab

Explorer ,
Feb 07, 2018

Copy link to clipboard

Copied

Hello everybody

Ich arbeite mit DW CC2018 und benutze Bootstrap - ganz tolles Tool!

Mein Problem: Ich möchte Hyperlinks direkt auf ein Ziel in einem Tab-Content setzen.

Beispiel 1: Im Tab "At Work" soll Use recycled paper angesteuert werden. Dazu muss ja der zweite Tab geöffnet werden und natürlich muss das Ziel mit einer id definiert werden.

Beispiel 2: Von einer anderen Seite soll Form walking/biking clubs angezeigt werden. Der Fall ist ähnlich, aber es handelt sich um ein Tab mit Dropdown.

Es gibt eine Menge Vorschläge im Internet, immer mit einem JS, das eingefügt werden muss.

Aber keine der Lösungen funktioniert.

Ich bin dankbar für jeden Hinweis, der zum Ziel führt.

Hier der Code für das Tab-Panel:

<div role="tabpanel">

          <ul class="nav nav-tabs" role="tablist">

            <li role="presentation" class="active"><a href="#home1" data-toggle="tab" role="tab" aria-controls="tab1">At Home</a></li>

            <li role="presentation"><a href="#paneTwo1" data-toggle="tab" role="tab" aria-controls="tab2">At Work</a></li>

            <li role="presentation" class="dropdown"><a href="#" id="tabDropOne1" class="dropdown-toggle" data-toggle="dropdown" role="tab" aria-controls="tab3" aria-haspopup="true" aria-expanded="false">In the community<span class="caret"></span></a>

              <ul class="dropdown-menu" aria-labelledby="tabDropOne1">

                <li><a href="#tabDropDownOne1" tabindex="-1" data-toggle="tab">Activities</a></li>

                <li><a href="#tabDropDownTwo1" tabindex="-1" data-toggle="tab">Gardening</a></li>

              </ul>

            </li>

        </ul>

          <div id="tabContent2" class="tab-content">

            <div role="tabpanel" class="tab-pane fade in active" id="home1">

              <ul>

                  <li>Turn off lights in empty rooms</li>

                  <li>Use motion sensors to turn lights on</li>

                  <li>Install Compact Fluorescent lighting (CFL)</li>

                <li>Turn the thermostat down</li>

              </ul>

            </div>

            <div role="tabpanel" class="tab-pane fade" id="paneTwo1">

              <ul>

                <li>Use recycled paper.</li>

                <li>Print on both sides of the paper</li>

                <li>Turn your computer screen off when you leave your desk</li>

              </ul>

            </div>

            <div role="tabpanel" class="tab-pane fade" id="tabDropDownOne1">

              <ul>

                <li>Ask your local government to institute green policies</li>

                <li>Form walking/biking clubs</li>

                <li>Form a subscription club to swap newspapers and magazines</li>

              </ul>

            </div>

            <div role="tabpanel" class="tab-pane fade" id="tabDropDownTwo1">

              <ul>

                <li>Create a community garden for herbs, fruits and vegetables</li>

                <li>Recycle dead branches and lawn waste as mulch </li>

                <li>Create a community garden for herbs, fruits and vegetables</li>

              </ul>

            </div>

        </div>

      </div>

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

<Is it possible to reference a hyperlink to a specific Book inside of a Tab?>

I don't think Tabbed panels are your best choice.  It would make a lot more sense to hyperlink directly to the Book's detail page with PHP and MySQL.   And this is not something DW can do unless you purchase a commercial extension or code it yourself.

Nancy

Views

430

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 07, 2018 0
Adobe Employee ,
Feb 07, 2018

Copy link to clipboard

Copied

Im Prinzip muss der Link nur den Anker/die ID des Divs enthalten z.B. <a href="http://www.deineurl.com#paneTwo1">Use recycled paper</a>. Dass der Tab dann aber auch geöffnet ist, wird wahrscheinlich nicht möglich sein. Der jeweils offene Tab hat eine class "active", ich kenne aber keine Möglichkeit, das in den Link zu integrieren.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 07, 2018 0
Explorer ,
Feb 07, 2018

Copy link to clipboard

Copied

Hallo Albrecht danke für die rasche Antwort. Ein Stück weiter bin ich damit. Mein Projekt: Eine Literaturliste ist mit Tabs in verschiedene Bereiche unterteilt. Gerne würde ich von anderen Seiten direkt auf ein Werk oder einen Verfasser verweisen, damit der Besucher nicht noch lange suchen muss. - Wäre schade, wenn das nicht möglich wäre!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 07, 2018 0
Adobe Community Professional ,
Feb 07, 2018

Copy link to clipboard

Copied

I am not sure that I understand what it is that you want to accomplish.

Have a look at the following (copy and paste into a new document)

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Untitled Document</title>

    <!-- Bootstrap -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<![endif]-->

  </head>

  <body class="container">

<div>

<a class="btn btn-primary text-white" data-toggle="collapse" data-target="#collapseOne" role="button" aria-expanded="false" aria-controls="collapseOne">Work</a>

<span class="dropdown">

  <a class="btn btn-primary dropdown-toggle-split dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    Dropdown link

  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">

    <a class="dropdown-item" href="#">Action</a>

    <a class="dropdown-item" href="#">Another action</a>

    <a class="dropdown-item" href="#">Something else here</a>

  </div>

</span>

</div>

<div id="accordion" class="mt-3">

  <div class="card">

    <div class="card-header" id="headingOne">

      <h5 class="mb-0">

        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">

          Use Recycled Paper

        </button>

      </h5>

    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">

      <div class="card-body">

        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

      </div>

    </div>

  </div>

  <div class="card">

    <div class="card-header" id="headingTwo">

      <h5 class="mb-0">

        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">

          Collapsible Group Item #2

        </button>

      </h5>

    </div>

    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">

      <div class="card-body">

        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

      </div>

    </div>

  </div>

  <div class="card">

    <div class="card-header" id="headingThree">

      <h5 class="mb-0">

        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">

          Collapsible Group Item #3

        </button>

      </h5>

    </div>

    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">

      <div class="card-body">

        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

      </div>

    </div>

  </div>

</div><!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>  </body>

</html>

And please tell us what you want changed.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 07, 2018 1
Explorer ,
Feb 08, 2018

Copy link to clipboard

Copied

Hi Ben

many thanks for your answer and your proposal.

It is not really what I meant. So I try to explain it again.

1) I want to create a list of books, e.g. "Books for Children", "Cooking Books", "Travel Guides".

2) This list is a Tab-Panel.
     Some of the Tabs are simple ones, some are Dropdown-Tabs. E.g. "Travel Guides" could have the panels "Europe", "USA", "Africa".

3) Each tab contents a list with books: Author and Titles in alphabetic order.

To create that with DW is no problem, the tool works fine.

BUT NO MY REQUEST.

Is it possible to reference a hyperlink to a specific Book inside of a Tab?

An example: I would set on an other page a hyperlink to a specific Travel Guide in the Content "Africa": Author: René Gardi, Title "Between Sahara and Sahel".

I combed so many sites in the web, but I didn't find a solution which works with DW 2018 including Bootstrap.

It would be great to know if  and how it is realizable.

MS

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 08, 2018 0
Adobe Community Professional ,
Feb 08, 2018

Copy link to clipboard

Copied

<Is it possible to reference a hyperlink to a specific Book inside of a Tab?>

I don't think Tabbed panels are your best choice.  It would make a lot more sense to hyperlink directly to the Book's detail page with PHP and MySQL.   And this is not something DW can do unless you purchase a commercial extension or code it yourself.

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 08, 2018 1
Explorer ,
Feb 08, 2018

Copy link to clipboard

Copied

Hi Nancy many thanks for your answer - it's a pitty, but after all, I know that I have to look for a different solution as you gave me the advise. MS

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 08, 2018 0