Skip to main content
P
PizzaPasta
Inspiring
February 7, 2018
Answered

Hyperlink to Tab

  • February 7, 2018
  • 1 reply
  • 1019 views

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>

    This topic has been closed for replies.
    Correct answer Nancy OShea

    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


    <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

    1 reply

    A
    Adobe Employee
    Albrecht Volk
    Adobe Employee
    February 7, 2018

    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.

    P
    PizzaPastaAuthor
    Inspiring
    February 7, 2018

    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!

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    February 8, 2018

    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.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices