我一直试图在我的页面之一中实现制表符。代码如下。
<div class="row justify-content-between">
<div class="col-lg-3">
<a class="nav-link p-3 mb-2 sidebar-link justify-content-between text-success ml-4" href="#1" data-toggle="tab">
<h4 class="text-success size">Vehicles</h4>
</a>
<a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#2" data-toggle="tab">
<h4 class="text-success size">Battery</h4>
</a>
<a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#3" data-toggle="tab">
<h4 class="text-success size">Charging</h4>
</a>
</div>
<div class="tab-content col-lg-9">
<div class="tab-pane active" id="1">
<!-- Content here -->
</div>
<div class="tab-pane" id="2">
<!-- content here -->
</div>
<div class="tab-pane" id="3">
<!-- content here -->
</div>
</div>
</div>
我要做的是,我创建了两列,一列包含链接,另一列包含应根据单击的链接显示数据的区域。在运行时,该代码实际上只工作一次,即,第一次单击链接时,它会在右侧显示相应的内容。但是,当我尝试访问另一个链接时,它不起作用。这种工作只有一次。无论我要在数据之间切换多少次,该如何使它们工作?
答案 0 :(得分:1)
您没有为导航标签添加“导航导航标签”列表容器。现在,您的所有链接都作为独立的内部链接运行。因此,它仅需单击一下即可工作。
这是更新代码
like_button = driver.find_element_by_xpath('//*[@aria-label="Like"]').click()
让我知道它是否满足您的要求。
答案 1 :(得分:1)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link active " role="tab" aria-selected="true" href="#1" data-toggle="tab">
<h4 class="text-success size">Vehicles</h4>
</a>
<a class="nav-item nav-link " href="#2" role="tab" aria-selected="false" data-toggle="tab">
<h4 class="text-success size">Battery</h4>
</a>
<a class="nav-item nav-link " href="#3" role="tab" aria-selected="false" data-toggle="tab">
<h4 class="text-success size">Charging</h4>
</a>
</div>
</nav>
<div class="tab-content">
<div class="tab-pane active" id="1">
<!-- Content here -->
<h1>Hello</h1>
</div>
<div class="tab-pane" id="2">
<!-- content here -->
<h1>hi</h1>
</div>
<div class="tab-pane" id="3">
<!-- content here -->
<h1>why</h1>
</div>
</div>
</div>
</div>
</div>
请检查此解决方案,希望它对您有用。